vue+element-ui+js頁面列印（列印elementui的table）

一隻特立獨行的小豬崽發表於2020-12-25
VueUIJS

前端呼叫瀏覽器列印功能，實現純前端vue+element-ui+js列印頁面功能

1.效果展示

開啟新頁面，列印表格，可以自動分頁
在這裡插入圖片描述

2.封裝成公共函式

可以根據自己的需要，選擇是否封裝成公共函式。
我是放在utils下的config.js檔案裡面。

//id 是你要列印的某個dom元素的id名
        export function printExcel(id) {
            // 空頁面
            let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>";
            // 定義element-ui table元件的樣式
            const tabStyle = `<style>
                table{width:100%;display:table-cell!important;box-sizing:border-box;}
                .el-table__header,.el-table__body,.el-table__footer{width:100%!important;border-collapse: collapse;text-align:center;}
                table,table tr th, table tr td { border:1px solid #ddd;color:#606266;word-wrap:break-word}
                table tr th,table tr td{padding:4mm 0mm;word-wrap:break-word }
                .el-table__body, tr td .cell{width:100%!important}
                .el-table th.gutter{display: none;}
                .el-table colgroup.gutter{display: none;}
                </style><body>`;
            let content = "";
            // 獲取名為傳入id的 dom元素內的內容
            let str = document.getElementById(id).innerHTML;
            // 拼接空頁面+style樣式+dom內容
            content = content + str;
            printStr = printStr + tabStyle + content + "</body></html>";
            // 開啟新頁面
            let pwin = window.open("_blank");
            // 將內容賦值到新頁面
            pwin.document.write(printStr);
            pwin.document.close();
            // 聚焦-不加focuse，在某些情況下，列印頁面會有問題。
            pwin.focus();
            // 使用setTimeout，等頁面dom元素渲染完成後再列印。
            setTimeout(() => {
                pwin.print(); // 列印功能。 例如 window.print() 直接列印當前整個頁面。 
                pwin.close(); // 關閉 列印建立的當前頁面
            }, 500);

        }

3.在.vue檔案中引入並使用"printExcel"函式

在需要列印的dom元素外面包了一個div，id叫“export”
在這裡插入圖片描述
// 使用-點選事件觸發"printExcel "，傳入引數為 id

// 引入函式
import { printExcel } from "@/utils/config";
    printExcel() {
      printExcel("export");
    },

相關文章