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>

3. js代码

// 导入依赖
import FileSaver from 'file-saver'
import htmlDocx from "html-docx-js/dist/html-docx"//模板word导出exportWordTpl() {let contentHtml = document.getElementById("id").innerHTMLlet 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');}

vue 3.0(通用) 表格导出成Excel文件或HTML转word文档相关推荐

vue导出excel加一个进度条_vue项目中如何把数据导出成excel文件
Loading... 关于vue中如何把数据导出成excel文件 ### 1. 安装依赖 ``` yarn add file-saver yarn add xlsx yarn add script-l ...
Vue将echarts数据导出成excel文件
Vue将echarts数据导出成excel文件一.下载vendor插件下载 vendor 文件放置项目的 src 目录下链接:https://pan.baidu.com/s/1XYYQ186zo ...
报表如何批量导出成 excel 文件
需求说明报表展现后可以通过工具栏中的导出按钮将当前展现的报表导出成 excel 文件,但是在实际使用中通常会要求报表不需要展现,直接通过一些操作将报表导出成 excel 文件,并且往往会要求批量导出 ...
Html 中表格导出生成excel文件，解决中文导出失败问题。
Html 中表格导出生成excel文件,解决中文导出失败问题. 网上有Github的jquery插件,但是表格中含有中文的时候,会导出失败,jquery.base64出现INVALID_CHARACT ...
Pl/sql 如何将oracle的表数据导出成excel文件？
oracle将表数据导出成excel文件的方法 1)在SQL窗体上,查询需要导出的数据 --查询数据条件--select MID,CODE,NAME from Dxc_Goods_Cate where ...
VUE导出含（charts）图表的word文档
项目场景: 关于VUE导出含(charts)图表的word文档问题描述: 由于项目需求要导出数据,开始做的PDF,但是后期考虑到,PDF无法编辑的问题,需要以word文档的形式展示,开始之前需要安装 ...
【vue + Excel表格导入与导出】导入Excel并展示在el-table表格中，表格导出为Excel文件
注:末尾有完整代码效果图 Excel 1.下载依赖 xlsx是导入所需依赖 file-saver是导出所需依赖 npm install xlsx --save npm install file-sa ...
SAP UI5 表格数据如何导出成 Excel 文件(Table Export As Excel)
本教程前一步骤,我们在介绍 SAP UI5 SmartTable 时,提到了它的 Excel 导出功能.如果将 iseExportToExcel 设置为 true,就可以启用 Excel 导出功能,将 ...
Vue 使用XLSX导出excel，并且设置标题背景颜色、字体、居中。并且在前端导出成excel文件
1.先看效果图 2.引入依赖 npm install xlsx-style --save npm install --save xlsx 3.运行项目会发生一个报错 This relative mod ...
把table表格导出为excel文件
<script type="text/javascript">/* 把html table表格导出为excle文件使用方法:<a href="javaS ...

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

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

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

1. 安装依赖

2. 表格添加属性

3. js代码

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

1. 安装依赖

2. 表格添加属性

3. js代码

html转Word文档

1. 安装依赖

2. 表格或其他html

3. js代码

vue 3.0(通用) 表格导出成Excel文件或HTML转word文档相关推荐

最新文章

热门文章