vue前端html导出word文档

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

 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 = `
 910
11             
12             
13                 ${contentDocument.innerHTML}
14             
15             `;
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     },

1 span ref="downloadArea">span>

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

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

            let content = `
            
                
                ${contentDocument.innerHTML}
            
            `;

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