vue实现前端页面点击下载table表格为pdf或excel

1.点击下载为excel
要安装的插件:
npm install html2canvas jspdf --save
要下载的js文件:
Blob.js和Export2Excal.js
放在项目的src/excel_plugin 目录下
新建一个js文件,放入下面封装好的函数:
vue实现前端页面点击下载table表格为pdf或excel_第1张图片
具体代码:
export function exportChooseExcel(tHeader, filterVal, list, pName) {
// 兼容ie10哦!
require.ensure([], () => {
const { export_json_to_excel } = require("…/excel_plugin/Export2Excel"); // 引入文件
const data = formatJson(filterVal, list);
export_json_to_excel(tHeader, data, pName); //列头信息 数据内容 导出的excel文件名字
});
}
function formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
}
2.点击下载为pdf
要安装的插件
npm install html2canvas jspdf --save
将下面函数放入js文件:
vue实现前端页面点击下载table表格为pdf或excel_第2张图片
用法:
在要使用的页面引入这两个函数:
在这里插入图片描述
在这里插入图片描述

你可能感兴趣的:(vue实现前端页面点击下载table表格为pdf或excel)