vue前端html導出word文檔

本文轉載自查看原文 2020-07-08 14:25 10369

1、index.html文件內引入

1 <script src="<%= BASE_URL %>js/html-docx.js"></script>

2、在導出頁面加入方法

 1 // 導出 word 文檔
 2     exportDocx() {
 3       // 克隆報告HTML
 4       let contentDocument = $.clone(this.$refs.report);
 5       this.convertImagesToBase64(contentDocument);
 6       this.convertChartsToBase64(contentDocument);
 7 
 8       let content = `<!DOCTYPE html><html>
 9             <head>
10                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
11             </head>
12             <body>
13                 ${contentDocument.innerHTML}
14             </body>
15             </html>`;
16       console.log(content);
17       let converted = htmlDocx.asBlob(content);
18       saveAs(converted, `${this.title}.docx`);
19 
20       let link = this.createDownloadLink(converted, `${this.title}.docx`);
21 
22       this.$refs.downloadArea.innerHTML = "";
23       this.$refs.downloadArea.appendChild(link);
24     },
25 
26     // 轉換圖片為 base64 (todo: 有可能因跨域報錯)
27     convertImagesToBase64(contentDocument) {
28       // 找到所有的圖片
29       let imgs = contentDocument.querySelectorAll("img");
30 
31       // 圖片轉換用
32       let canvas = document.createElement("canvas");
33       let ctx = canvas.getContext("2d");
34 
35       imgs.forEach((img, i) => {
36         if (img.src.startsWith("data:image")) return;
37 
38         // img表現尺寸
39         let realWidth = parseInt(img.style.width);
40         let realHeight = parseInt(img.style.height);
41 
42         // 清空畫布並調整為 img 的大小
43         ctx.clearRect(0, 0, canvas.width, canvas.height);
44         canvas.width = realWidth;
45         canvas.height = realHeight;
46 
47         // 畫圖片到畫布
48         ctx.drawImage(
49           img,
50           0,
51           0,
52           img.width,
53           img.height,
54           0,
55           0,
56           realWidth,
57           realHeight
58         );
59         // ctx.drawImage(img, 0, 0);
60 
61         // 畫布轉為 base64
62         let dataURL = canvas.toDataURL();
63         img.setAttribute("src", dataURL);
64       });
65 
66       canvas.remove();
67     },
68 
69     convertChartsToBase64(contentDocument) {
70       // 找到所有的圖表 （echart）
71       let canvases = contentDocument.querySelectorAll("canvas");
72 
73       // 遍歷圖表，轉換為 base64 靜態圖片
74       canvases.forEach((canvas, i) => {
75         let echart = this.$refs.chart[i];
76         let url = echart.getDataURL();
77         let img = document.createElement("img");
78         img.src = url;
79         canvas.parentNode.replaceChild(img, canvas);
80       });
81     },
82 
83     // 生成下載鏈接
84     createDownloadLink(fileObj, fileName) {
85       let link = document.createElement("a");
86       link.href = URL.createObjectURL(fileObj);
87       link.download = fileName || "document.docx";
88       link.appendChild(document.createTextNode("如果沒有自動下載，點這里"));
89       return link;
90     },

3、需要導出的元素添加 ref="report"

4、導出按鈕旁加一個元素

1 <span ref="downloadArea"></span>

問題：導出word會沒有格式。

解決辦法：

方法一：需要導出的html寫成內聯樣式

方法二、使用law-loader內聯插件

1.安裝插件

2.寫一個xxx.css.txt樣式文件

3.在頁面的script標簽中引入

var reportCss = require("raw-loader!./xxx.css.txt");

4.導出方法代碼改成

// 導出 word 文檔
        exportDocx() {
            // 克隆報告HTML
            let contentDocument = $.clone(this.$refs.report);
            this.convertImagesToBase64(contentDocument);
            this.convertChartsToBase64(contentDocument);

            let content = `<!DOCTYPE html><html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <style>
                    ${reportCss}
                </style>
            </head>
            <body>
                ${contentDocument.innerHTML}
            </body>
            </html>`;

            let converted = htmlDocx.asBlob(content);
            saveAs(converted, "xxxx.docx");

            let link = this.createDownloadLink(converted, "xxxx.docx");

            this.$refs.downloadArea.innerHTML = "";
            this.$refs.downloadArea.appendChild(link);
        },

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue項目純前端導出word文檔 html頁面導出word文檔 swagger2 導出api為html和word文檔將HTML導出生成word文檔 vue實現word或pdf文檔導出的功能前端vue將html導出為pdf vue前端下載word 文檔 swagger2 導出離線Word/PDF/HTML文檔如何在PowerDesigner將PDM導出生成WORD文檔或者html文件 echarts 導出為word文檔