dom元素生成word文档（vue2、vue3）_vue3 html-docx-js-优快云博客

导出的文档中包含图片情况下，word文档图片会加载慢一些，可以等一下

引入node包

npm install html-docx-js
npm install file-saver

vue3时需要将html-docx-js 改为 html-docx-fixed 进行引入

html-docx-js中有一个对象函数已经弃用，所以导致无法使用

代码

//script标签中引入
import FileSaver from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx";




//导出dom元素方法

    demo2() {
      // 两个class，一个是代表宽度300，一个是代表宽度600

      let contentHtml = document.getElementById("domId").innerHTML;
      let content = `
    	 	<!DOCTYPE html><html>
            	<head>
	                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	            </head>
	            <body>
	                <div>
                  		${contentHtml}
                	</div>
	            </body>
            </html>`;
//图标宽高可能不生效，所以需要使用下面方法，给图片设置宽高
            content = content.replaceAll('<img',`<img width="600" height="200" `);
      let converted = htmlDocx.asBlob(content);
      FileSaver.saveAs(converted, "测试.docx");
    },