表格导出成Excel文件或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');
    }

注意：html-docx-js需要修改html-docx.js

html-docx-js需要修改html-docx.js，因为其中的with语法在严格模式中禁用；

原因：什么是with语句；禁用With语句

html-docx.js位置：\node_modules\html-docx-js\dist\html-docx.js

修改三个地方：
1、13101行附近，删除红色两行，在变量前加obj.（蓝色部分）
在这里插入图片描述
2、13131行附近，删除红色两行，在变量前加obj.（蓝色部分）
在这里插入图片描述
3、13145行附近，删除红色两行，在变量前加obj.（蓝色部分）
在这里插入图片描述

# vue.js # html # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue