【xlsx+vue】前端生成可下载的xlsx表格

组件引入：

  <script type="text/javascript" src="./xlsx.core.min.js"></script>

相关调用：jsonData为后台返回的json数据

        const title = [{ key: "aaa", text: "字段1" },{ key: "bbb", text: "字段2" },{ key: "ccc", text: "字段3" },];exportSpecialExcel(title, jsonData);

相关方法：

export const exportSpecialExcel = (title = [], data = [], filename = Date.now()) => {const tableData = [];// 添加titletableData.push(title.map((n) => n.text));for (const item of data) {const row = [];for (const t of title) {row.push(item[t.key]);}tableData.push(row);}var sheet = XLSX.utils.aoa_to_sheet(tableData);openDownloadDialog(sheet2blob(sheet), `${filename}.xlsx`);
}
export const 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:///模式下不会生效aLink.click();
}// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
export const sheet2blob = (sheet, sheetName) => {sheetName = sheetName || "sheet1";var workbook = {SheetNames: [sheetName],Sheets: {},};workbook.Sheets[sheetName] = sheet;// 生成excel的配置项var wopts = {bookType: "xlsx", // 要生成的文件类型bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性type: "binary",};var wbout = XLSX.write(workbook, wopts);var blob = new Blob([s2ab(wbout)], {type: "application/octet-stream",});return blob;
}

※相关资料找不到了此篇仅为学习记录

【xlsx+vue】前端生成可下载的xlsx表格相关推荐

vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
vue + docxtemplater 实现前端生成并下载word
vue + docxtemplater 实现前端生成并下载word 文章目录 vue + docxtemplater 实现前端生成并下载word 前言平时工作中需要将多条数据以word形式下载,手动 ...
Vue前端资源本地下载（即文件放在前端目录下）
1. 静态资源文件一般放置在public的static的目录下,src/assets下不行 2. 写一个按钮比如文件名为"下载资源",下载到你本地的文件名称下载文件名为&quo ...
前端生成、下载二维码
前台生成.下载二维码点击查看按钮,弹出二维码弹框查看按钮 <el-button type="text" @click="useqrcode(scope.row) ...
vue前端生成二维码并提供二维码下载
在一个管理后台的开发过程中使用到了需要前端自行生成分享二维码,并提供二维码下载功能,网上的解决方案很多,最终自己做完的思路和代码整理记录方便后续学习使用! vue版本为2.x 具体实现步骤: 下载安装 ...
ant jeecg vue 前端通过dom节点导出xlsx表格
点击导出 : 效果图: 上代码安装依赖:npm install xlsx@0.17.0 file-saver@2.0.5 --save xlsx要指定版本不然会报错 <template& ...
vue：实现前端生成并下载二维码（使用qrcodejs2插件）
需求点击按钮下载二维码,并命名为"奶绿走糖-二维码". HTML <button @click="getPersonCode()">下载二维码&l ...
vue前端生成二维码并导出PDF
1.安装插件 npm install --save qrcodejs2 (这是生成微信二维码插件) npm install html2canvas jspdf --save (这是将html页面转化为 ...
前端生成pdf 下载
前端实现HTML转PDF下载的两种方式 - 简书方式一:使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的bas ...

【xlsx+vue】前端生成可下载的xlsx表格

【xlsx+vue】前端生成可下载的xlsx表格相关推荐

最新文章

热门文章