vue项目中的前端导出

最新推荐文章于 2024-05-14 10:49:01 发布

荒_web

最新推荐文章于 2024-05-14 10:49:01 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_46378921/article/details/114276224

版权

前端导出功能

方法一：原样导出

	<a @click="exportExcel">导出</a>
	exportExcel () {
       // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的		HTML文档，设置charset为urf-8以防止中文乱码
      var html = "<html><head><meta charset='utf-8' /></head><body>" + document.querySelector('.table').outerHTML + "</body></html>"
      // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性	   的对象
      var blob = new Blob([html], { type: "application/vnd.ms-excel" })
      //这里也可以通过指定id进行获取
      var a = document.getElementsByTagName("a")[0]
      // 利用URL.createObjectURL()方法为a元素生成blob URL
      a.href = URL.createObjectURL(blob)
      // 设置文件名
      a.download = '数据超标统计' + '.xls'
    }

方法二：利用file-saver xlsx xlsx-style导出

// 下载
npm install --save file-saver xlsx xlsx-style
// 引入
import FileSaver from "file-saver"
import XLSX from "xlsx"
import XLSXS from 'xlsx-style'
//注意引入xlsx-style 会报错如下错误
//This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

// 解决方法
// 找到在\node_modules\xlsx-style\dist\cpexcel.js 807行 的var cpt = require('./cpt' + 'able');修改成var cpt = cptable;

html部分

<el-button type="text" style="color: #2c3240" @click="exportExcel">
	导出
</el-button>
<el-table-block
 	:column="column"
 	:data="tableData"
	class="table"
/>

js部分

import FileSaver from "file-saver"
import XLSX from "xlsx"
import XLSXS from 'xlsx-style'

	 exportExcel () {
      //  .table要导出的是哪一个表格
      var wb = XLSX.utils.table_to_book(document.querySelector('.table'))
      // 设置导出样式
      this.setExlStyle(wb['Sheets']['Sheet1'])
      var ws = XLSXS.write(wb, {
        type: "buffer"
      });
      try {
        FileSaver.saveAs(
          new Blob([ws], { type: "application/octet-stream" }),
          '导出表格名称' + '.xlsx'
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, ws);
      }
      return ws
    },
    setExlStyle (data) {
      let borderAll = {  //单元格外侧框线
        top: {
          style: 'thin',
        },
        bottom: {
          style: 'thin'
        },
        left: {
          style: 'thin'
        },
        right: {
          style: 'thin'
        }
      };
      data['!cols'] = [];
      for (let key in data) {
        if (data[key] instanceof Object) {
          data[key].s = {
            border: borderAll,// 设置边框
            alignment: {
              horizontal: 'center',   //水平居中对齐
              vertical: 'center'
            },
            font: {
              sz: 11  // 设置字体大小
            },
            bold: true, // 是否加粗
            numFmt: 0
          }
          data['!cols'].push({ wpx: 115 }); // 设置列宽
        }
      }
      return data;
    }

荒_web

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue项目中的前端导出

前端导出功能方法一：原样导出 <a @click="exportExcel">导出</a> exportExcel () { // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的 HTML文档，设置charset为urf-8以防止中文乱码 var html = "<html><head><meta charset='utf-8' />&lt
复制链接

扫一扫