vue前端html导出word文档

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);
        },