vue 3.0(通用) 表格（HTML）导出成Excel文件或HTML转word文档

苦夏木禾

已于 2023-07-19 09:59:26 修改

阅读量5.9k

点赞数 6

分类专栏： vue 文章标签： vue.js html javascript

于 2021-05-17 17:55:39 首次发布

本文链接：https://blog.csdn.net/lhkuxia/article/details/116941912

版权

vue 专栏收录该内容

69 篇文章 11 订阅

订阅专栏

表格导出成Excel文件或HTML转word文档

table导出excel（xlsx版本高于0.18）
table导出excel（xlsx版本低于0.18）
html转Word文档

table导出excel（xlsx版本高于0.18）

1. 安装依赖

npm install xlsx fs

fs是用来保存文件的，也是必须安装的。

2. 表格添加属性

标签添加ref属性，用于获取该元素el；也可添加id属性获取

<table ref="exportTableRef"> ... </table>

3. js代码

// 导入依赖
import * as XLSX from "xlsx/xlsx.mjs";

// 导出方法
exportBtn() {
    var table_elt = this.$refs.exportTableRef;

    // Extract Data (create a workbook object from the table)
    var workbook = XLSX.utils.table_to_book(table_elt);

    // Process Data (add a new row)
    var ws = workbook.Sheets["Sheet1"];
    XLSX.utils.sheet_add_aoa(ws, [], {
      origin: -1,
    });

    // Package and Release Data (`writeFile` tries to write and save an XLSB file)
    XLSX.writeFile(workbook, "导出.xlsx");
}

table导出excel（xlsx版本低于0.18）

1. 安装依赖

npm install --save xlsx
npm install --save file-saver

file-saver是用来保存文件的，也是必须安装的。

2. 表格添加属性

标签添加ref属性，用于获取该元素el；也可添加id属性获取

<table ref="exportTableRef"> ... </table>

3. js代码

// 导入依赖
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

// 导出方法
exportBtn() {
  // 获取表格元素
  const el = this.$refs.exportTableRef
  // 文件名
  const filename = '导出.xlsx'
  /* generate workbook object from table */
  const wb = XLSX.utils.table_to_book(el)
  /* 或者用id */
  // const wb = XLSX.utils.table_to_book(document.getElementById("id"))
  /* get binary string as output */
  const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename)
  } catch (e) {
    console.log(e)
  }
  return wbout
}

html转Word文档

1. 安装依赖

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

file-saver是用来保存文件的，也是必须安装的。

2. 表格或其他html

标签添加ref属性，用于获取该元素el；也可添加id属性获取

<table id="id"> ... </table>

如果有图片，一定要使用原生属性设置宽高,其他的形式是不生效的

<img width="100" height="100" />

3. js代码

// 导入依赖
import FileSaver from 'file-saver'
import htmlDocx from "html-docx-js/dist/html-docx"

//模板word导出
    exportWordTpl() {
        let contentHtml = document.getElementById("id").innerHTML
      	let cssHTML = `
		    table {
		    width: 100%;
		    table-layout: fixed;
		    margin-top:10px;
		    border: 1px solid #ddd;
		    border-collapse: collapse;
		    }
		    .export-tb .thead td {
		    font-weight: bold;
		    }
		    td {
		    border: 1px solid #ddd;
		    color: #333;
		    text-align: left;
		    padding: 6px 10px;
		    }`
    	 let content = `
    	 	<!DOCTYPE html><html>
            	<head>
	                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	                <style>
	                    ${cssHTML}
	                </style>
	            </head>
	            <body>
	                <table>
                  		${contentHtml}
                	</table>
	            </body>
            </html>`;
      let converted = htmlDocx.asBlob(content);
      FileSaver.saveAs(converted, '文件名.docx');
    }