vue中实现将html导出为word/excel

Stitch_xiao

已于 2024-03-07 11:18:33 修改

阅读量5.8k

点赞数 6

分类专栏： vuejs 文章标签： vue.js javascript 前端

于 2023-06-22 04:30:00 首次发布

本文链接：https://blog.csdn.net/stitch_xiao/article/details/131328383

版权

vuejs 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章提供了一个简单的教程，教读者如何将网页中的特定部分导出为Word和Excel文档。通过安装html-docx-js和file-saver依赖，给目标容器设置ID，然后获取DOM节点并利用这些库的功能，可以按照当前页面样式导出内容。导出过程涉及到HTML转换以及使用FileSaver进行文件保存。

摘要由CSDN通过智能技术生成

导出为word文档：

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

保姆级别教程：

step1：安装需要的依赖

npm install html-docx-js -S

npm install file-saver -S

step2：给导出那部分的容器起个id名

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

step3：在需要的地方引入依赖

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

step4：获取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:

导出为excel:

step1：安装依赖

npm install file-saver -S

step2：给需要导出的那部分起id名

<div id="meeting-record">
...
<div>

step3:引入依赖

import { saveAs } from "file-saver"; // 引入保存文件函数

step4：获取dom并导出（依然是行内样式）

exportToExcel() {
      const html = document.getElementById("meeting-record").innerHTML; // 获取需要导出的HTML内容

      const blob = new Blob([html], { type: "application/vnd.ms-excel" }); // 创建Blob对象
      saveAs(blob, "output.xls"); // 调用保存文件函数进行下载
}

web页面样式：