vue2 导出xslx

最新推荐文章于 2025-05-26 09:46:59 发布

雨沫相与

最新推荐文章于 2025-05-26 09:46:59 发布

阅读量173

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/u011933026/article/details/140468278

"vue": "2.6.10",

"xlsx": "0.14.1"

"file-saver": "2.0.1",

页面代码

npm install xlsx file-saver --save

<el-button type="success" @click="outExcel">导出</el-button>

import {xlsx} from '@/utils/xlsx'

export default {
data() {
    return {
		//表头
		listHander:{
		    name:'名称',
		    bookingTime:'日期',
		    timeRange:'时段',
		    mobile:'电话',
		    },
}
}，
methods: {
   // 存储值：将对象转换为Json字符串 自己根据逻辑存储
	window.sessionStorage.setItem("tablargl", JSON.stringify(this.tableDateRgl));


	//导出入馆率
	outExcel(){
		// tablargl是要导出的数据内容（表格里的内容），
		// this.listHander对应要导出内容的表头
		// 入馆率：指向的是excel文件名
        // 这里是用的本地存储取得值
		var tablargl = JSON.parse(window.sessionStorage.getItem("tablargl"));
		console.log('tablargl',tablargl)
		xlsx(tablargl,this.listHander,'入馆率')
	},
}
}


导入的页面路径 utils/xlsx.js

import fs from 'file-saver'
import * as XLSX from 'xlsx'
export function xlsx(json, fields, filename = '.xlsx') {//导出xlsx
  json.forEach(item => {
    for (let i in item) {
      if (fields.hasOwnProperty(i)) {
        item[fields[i]] = item[i];
      }
      delete item[i]; //删除原先的对象属性
    }
  })
  let sheetName = filename //excel的文件名称
  let wb = XLSX.utils.book_new()  //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
  let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //将JS对象数组转换为工作表。
  wb.SheetNames.push(sheetName)
  wb.Sheets[sheetName] = ws
  const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//设置表格的样式
  let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false }  //写入的样式
  let wbout = XLSX.write(wb, wopts)
  let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename + '.xlsx')
}
const s2ab = s => {
  var buf;
  if (typeof ArrayBuffer !== 'undefined') {
    buf = new ArrayBuffer(s.length)
    var view = new Uint8Array(buf)
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
    return buf
  } else {
    buf = new Array(s.length);
    for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
}