首页 前端知识 vue中实现将html导出为word文档

vue中实现将html导出为word文档

2024-02-06 15:02:38 前端知识 前端哥 128 32 我要收藏

需求:将页面整成理想样式,将想要的那一部分页面导出成word,不用写模板,按照当前页面样式导出即可。(简易版)

保姆级别教程:

第一步:安装需要的依赖

npm install html-docx-js -S

npm install file-saver -S

第二步:给导出那部分的容器起个id名

<el-dialog
        width="40%"
        title="行程信息"
        :visible.sync="innerVisible"
        append-to-body
      >
    <div id="myContainer">
    <!-- 此处省去一万字 -->
    </div>
</el-dialog>

第三步:在需要的地方引入依赖

import FileSaver from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx";

第四步:获取dom节点myContainer并导出(我写的行内样式)

/**导出data */
    exportWord() {
      let contentHtml = document.getElementById("route-detail").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>`;
      let converted = htmlDocx.asBlob(content);
      FileSaver.saveAs(converted, "行程" + this.form.tripName + ".docx");
    },

 最终效果:

预览:

 导出word:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1456.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!