标签:xlsx Vue 表格 saver 打印 Excel file print
安装文件
-
安装
xlsx
库npm install xlsx
-
安装
file-saver
库npm install file-saver
-
如果需要打印表格,安装
vue-print-nb
库npm install vue-print-nb
导出表格
主要使用的是 js-xlsx
,导出 Excel 文件,主要是如何生成一个 sheet,之后将这个 sheet 转成最终 Excel 文件的 blob 对象,然后利用 URL.createObject
下载
-
配置生成 Excel 的配置项
bookType
要生成的文件类型bookSST
是否生成Shared String Table
,如果开启生成速度会下降,但在低版本 IOS 设备上有更好的兼容性type
可以使用base64
、binary
(BinaryString)、string
(utf8 字符串)、buffer
(node buffer) 、array
(Unit8Array 8位无符号数组) 、file
(文件路径,仅 node 支持) -
字符串转 ArrayBuffer 进行文件下载,这里使用
file-saver
FileSaver.saveAs(Blob/File/Url, filename)
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
function htmlToExcel(dom, title = '默认标题') {
const wb = XLSX.utils.table_to_book(document.querySelector(dom))
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
const blob = new Blob([wbout], { type: 'application/octet-stream' })
FileSaver.saveAs(blob, `${title}.xlsx`)
}
- 组件里使用。直接调用
htmlToExcel
方法,传入选择器和标题名称即可
<el-table id="printTest" :data="tableData" style="width: 500px">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-button type="success" @click="htmlToExcel('#printTest', '表格')">导出Excel</el-button>
打印表格
main.js
import Print from 'vue-print-nb'
Vue.use(Print)
组件里使。用 v-print
指定需要打印的容器,如下示例 "'#printTest'"
:
- 注意:选择器需要用单引号包裹
<template>
<div>
<el-table id="printTest" :data="tableData" style="width: 500px">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-button type="primary" v-print="'#printTest'">打印</el-button>
</div>
</template>
标签:xlsx,Vue,表格,saver,打印,Excel,file,print 来源: https://blog.csdn.net/qq_38689395/article/details/117563920
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。