目录
使用版本
xlsx: 0.16.2
xlsx-style: 0.8.13
过程中报错
报错借鉴了下面链接,写的挺好的!
vue使用xlsx、xlsx-style和fileSaver导出excel表格_牛仔很会忙的博客-CSDN博客_vue使用xlsx
1.utils of undefined
需要切换一下xlsx版本 npm install --save xlsx@0.17.0
2.Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
在vue.config.js中添加这样一串代码:
configureWebpack: {
externals: {
'./cptable': 'var cptable'
},
},
3.Can’t resolve ‘fs’
在vue.config.js中继续添加:
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
externals: {
'./cptable': 'var cptable'
},
resolve: {
fallback: {
fs: false
}
},
}
})
4. jszip not a constructor:
需要在node_modules中找到相应的文件进行修改:
node_modules\xlsx-style\xlsx.js (1339行左右)
将
if(typeof jszip === 'undefined') jszip = require('./js'+'zip').JSZip;
替换成
if(typeof jszip === 'undefined') jszip = require('./jszip.js');
用到的方法
这里用到了一个openDownloadDialog方法,我是直接挂载到vue身上了,这样不用在每个页面引入;
1.在src目录下创建一个downLoad.js文件
文件内容就是openDownloadDialog方法:
export function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
在main.js中引入并挂载:
import { openDownloadDialog } from '@/export/download.js'
Vue.prototype.openDownloadDialog = function (val1, val2) {
openDownloadDialog(val1, val2);
}
修改源代码
1. xlsx这个包里,更改xlsx/dist/xlsx.extendscript.js这个文件:
var XLSX = {};
function make_xlsx_lib(XLSX){
XLSX.version = '0.16.2';
// 将上面的改为下面的即可
var XLSX2 = {};
function make_xlsx_lib(XLSX2){
XLSX2.version = '0.16.2';
完整demo演示代码
可以直接复制到自己项目中试一下,然后根据自己需要进行更改就行了
<template>
<div id="app">
<el-button type="primary" size="small" @click="downLoad"
>下载excel</el-button
>
<el-table :data="tableData" style="width: 100%" border ref="table">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
import XLSX2 from 'xlsx'
import XLSX from 'xlsx-style'
export default {
name: 'App',
components: {},
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
{
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1520 弄',
},
],
}
},
methods: {
// downLoad里面的代码是主要的
downLoad() {
// var fix = document.querySelector('.ant-table-thead')
var table_dom = this.$refs['table'].$el
//创建工作表
const new_book = XLSX2.utils.book_new()
//创建工作簿
const new_sheet = XLSX2.utils.table_to_sheet(table_dom)
// new_sheet['!cols'] = [{wch: 10}]
// new_sheet['!rows'] = [{hpx: 25}]
//自定义样式:第一列列宽
var wscols = [{ wch: 30 }, { wch: 30 }, { wch: 50 }]
var wsrows = [{ hpt: 35 }, { hpt: 35 }]
new_sheet['!cols'] = wscols
new_sheet['!rows'] = wsrows
let numIndex = 0
for (let key in new_sheet) {
if (key.indexOf('!') !== 0) {
if (numIndex < 4) {
console.log(key, numIndex, 'numindex')
new_sheet[key]['s'] = {
font: {
sz: 12, //设置标题的字号
bold: true, //设置标题是否加粗
name: '宋体',
},
//设置标题水平竖直方向居中,并自动换行展示
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: true,
},
// fill: {
// fgColor: {
// rgb: 'ebebeb',
// },
// },
}
new_sheet['B2']['s'] = {
font: {
sz: 12, //设置标题的字号
bold: true, //设置标题是否加粗
name: '宋体',
},
//设置标题水平竖直方向居中,并自动换行展示
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: true,
},
// fill: {
// fgColor: {
// rgb: 'ebebeb',
// },
// },
}
} else {
new_sheet[key]['s'] = {
font: {
sz: 10,
name: '宋体',
},
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: true,
},
}
}
numIndex++
}
}
XLSX2.utils.book_append_sheet(new_book, new_sheet, '健康码情况(各高校)')
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
type: 'binary',
}
console.log('123')
var wbout = XLSX.write(new_book, wopts)
var buf = new ArrayBuffer(wbout.length)
var view = new Uint8Array(buf)
for (var i = 0; i != wbout.length; ++i)
view[i] = wbout.charCodeAt(i) & 0xff
var blob = new Blob([buf], {
type: 'application/octet-stream',
}) // 字符串转ArrayBuffer
// 导出excel文件 如导出后的文件不能打开,请将后缀替换为 .xls
this.openDownloadDialog(blob, `测试.xlsx`)
// 导出excel文件 如导出后的文件不能打开,请将后缀替换为 .xls
},
},
}
</script>
<style>
</style>