JS表格导出，让每一个单元格都自适应内容的宽度。

首选讲下为什么要写让表格中的每个单元格都自适应宽度的，因为门店的同事不懂excel表格自适应宽度的功能，其实我也不懂excel，emmmm..........，所以老板就让我来处理了，宝宝心里苦但是说不出。

首先我这边是用vue去写的项目

写方法之前我们需要下载三个依赖包

npm install -S file-saver xlsx
npm install -D script-loader

如果你有很多地方都需要用到导出表格这个功能的话，建议在main.js入口文件中引入

// 这是main.js文件

import XLSX from "xlsx";

import FileSaver from "file-saver";

我们还需要使用到BIod跟Export2Excel文件，这两个文件我放到了我GitHub上面，如果有需要的可以直接上我GitHub下载，可也自行去快乐的天堂下载，文件地址：一股神秘的力量。

下载好后可按我这么创建文件夹存放

存放地方

那我们进入正题吧，以下未成年儿童不易观看~~~~

那我们开始贴代码莫咯

// 我喜欢这么写，不服的酒吧setTableDat扣出来就行了
// 假设这是跟main.js同级utlis文件夹下面的tableexport.js吧
exports.install = function (Vue, options) {
  /* eslint-disable */
      // 导出表格功能
      Vue.prototype.$tableExport = {
          /**
          * 导出excel表格
          * @param {导出的数据,数组} dataArr  必传 比如 [{name:小王,age:10,deran:'男'}]
          * @param {表头} headerdata 必传 比如 ['名字','年龄','性别']
          * @param {表格的key值} keydata 必传 比如 ['name','age','deran']
          * @param {表格导出的名字} tablename 不传默认这表格数据
          */
          setTableData : (dataArr = [], headerdata = [], keydata = [], tablename = '表格数据') => {
              require.ensure([], () => {
                const {
                    export_json_to_excel
                } = require('vendor/Export2Excel.js');
                // vendor/Export2Excel.js 这个是在webpakc中配置了vendor
                /*alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': resolve('src'),
                'vendor': resolve('src/vendor')
                }*/
                const tHeader = headerdata;
                const filterVal = keydata;
                const list = dataArr;
                const data = setDatas(filterVal,list)
                // 参数过滤
                function setDatas(filterVal, jsonData) {
                    return jsonData.map(v => filterVal.map(j => v[j]))
                }
                export_json_to_excel({header:tHeader, data, filename:tablename});
              })
          }
      }
}
//========================//
// 我们又假设这是main.js吧
// 在这里需要引入自己之前在utlis文件夹下面的tableexport.js

import tableexport from './utils/tableexport'
Vue.use(tableexport) // 注入

// 到这一步就是在需要导出表格的地方使用了

 // 导出表格
      daochu() {
        if(this.tableData.length==0){
          this.$message.error("目前表格没有数据不能导出");
        }else{
          // 这是需要导出的表头
          let headerArr = ['产品编号','产品名称','产品路线','产品状态']
          // 这是数组中obj中的属性
          let keyArr = ['productNo','title','route','statename']
          this.$tableExport.setTableData(this.tableData,headerArr,keyArr,this.tableData[0].route+'表格')
        }
      },

// 然后没了，就这样子的了

JS表格导出，让每一个单元格都自适应内容的宽度。

猜你喜欢