vue纯前端下载表格

一般我们做后台管理会遇到这样的需求：页面上的表格，需要纯前端技术来完成、不涉及接口对接、不涉及后端，就是你在页面上展示的表格是什么样，就要下载什么样的表格excel，方便人观察，废话不多说，上代码

如图：点击下载表格按钮、这是web页面的效果在最后一步可以看下载的表格效果

1、安装依赖包

npm install --save xlsx file-saver

npm install --save yxg-xlsx-style //调节样式需要用到的

2、引入依赖

import XLSX2 from 'xlsx'

3、封装下载用到的 js方法在utils下新建export.js（与业务无关、可直接复制）

import XLSX from 'yxg-xlsx-style'// 为合并项添加边框export function addRangeBorder(range, ws) {const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']if (range) {range.forEach(item => {const startColNumber = Number(item.s.r); const endColNumber = Number(item.e.r)const startRowNumber = Number(item.s.c); const endRowNumber = Number(item.e.c)const test = ws[arr[startRowNumber] + (startColNumber + 1)]for (let col = startColNumber; col <= endColNumber; col++) {for (let row = startRowNumber; row <= endRowNumber; row++) {ws[arr[row] + (col + 1)] = test}}})}return ws}// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载export function 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'}) // 字符串转ArrayBufferfunction s2ab(s) {var buf = new ArrayBuffer(s.length)var view = new Uint8Array(buf)for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFFreturn buf}return blob}export function openDownloadDialog(url, saveName) {if (typeof url === 'object' && url instanceof Blob) {url = URL.createObjectURL(url) // 创建blob地址}var aLink = document.createElement('a')aLink.href = urlaLink.download = saveName || '' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效var eventif (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)}

4、js部分代码（最重要的一部分）

import XLSX2 from 'xlsx'
//引入第三步在untils下新增的export.js文件的三个方法
import { addRangeBorder, sheet2blob, openDownloadDialog } from '@/utils/export'

    // 前端导出表格outTab() {// 若表格没有数据的时候，则提示无法下载if (this.records.length == 0) {this.$confirm('没有筛选出数据，无法进行表格导出！', '提示', {confirmButtonText: '确定',showCancelButton: false,type: 'warning'})} else {var xlsxParam = { raw: true } // 这个保证表格不进行解析 不做运算、解决表格内数据显示不正常（如数字前面0缺失、数字变成科学计数法等、就一定加上这句话、就能解决）//out-table是表格的id 记得设置表格的id="out-table"var wb = XLSX2.utils.table_to_sheet(document.querySelector('#out-table'), xlsxParam)// mytable为表格的id名for (var i = 0; i < 11; i++) {wb['!cols'][i] = { wpx: 130 }}for (const key in wb) {if (key.indexOf('!') === -1) {wb[key].s = {font: { // 字体设置sz: 9,bold: false,color: {rgb: '000000'// 十六进制，不带#}},alignment: { // 文字居中horizontal: 'center',vertical: 'center',wrap_text: true},border: { // 设置边框top: { style: 'thin' },bottom: { style: 'thin' },left: { style: 'thin' },right: { style: 'thin' }}}}}var data = addRangeBorder(wb['!merges'], wb)var filedata = sheet2blob(data)//这是下载的表格的名字、可自定义openDownloadDialog(filedata, '其他调整项信息.xlsx')}},

5、效果图（结合上面web页面、看下载表格的效果）

vue纯前端下载表格相关推荐

VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能. 使用方法 1. 安装依赖 npm install vue-json-excel 2. 引入组件 a. 全局引入 ...
纯前端下载pdf链接文件,而不是打开预览的解决方案
纯前端下载pdf链接文件,而不是打开预览的解决方案参考文章: (1)纯前端下载pdf链接文件,而不是打开预览的解决方案 (2)https://www.cnblogs.com/jackson-yqj/ ...
ant design Vue 纯前端实现分页
ant design Vue 纯前端实现分页功能 (有选择的话最好让后端分页,前端分页可能会有问题,为了性能,尽量不要前端分页) 自己想的一个简单方法: 通过页码改变事件,每页数据个数改变事件,获取改 ...
【web】【django】datatable的button扩展实现纯前端下载和copy指定列内容，以及django的HTTPResponse实现下载功能
Table of Contents 功能需求描述一使用Datatables实现纯前端下载.拷贝二 query db 实现下载(django) 功能需求描述用户需要以网页为媒介,从DB里拉取一些 ...
纯前端下载 csv 格式文件
纯前端下载 csv 文件 table 数据 data() {return {header: [{_id: '01',label: '姓名',prop: 'name',},{_id: '02',labe ...
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
Vue纯前端：榜单管理系统
文章目录: 一.主要功能: 二.实现效果: 1.主页: 2.注册: 3.登录: 4.列表界面: 5.添加应用界面: 6.修改应用界面: 7.模糊查询: 三.整体架构: 四.配置文件说明: 五.功能说明 ...
vue使用XLSX下载表格
下载 import XLSX from 'xlsx';let body =[{name:'zs', age: 15}];let header = ['name', 'age'];let name = ...
纯前端下载excel数据（导出）
需求将表格中的数据导出为excel文件工具 excel插件在你的工具文件夹下新建index.js页面在这里插入代码片 export function exportExcelFile(array, ...

vue纯前端下载表格

vue纯前端下载表格相关推荐

最新文章

热门文章