Vue2实现导出Excel文件，并设置行高，宽度，合并单元格等。

weixin_44945533 2024-01-05
49 阅读 0 评论 0 点赞
Vue2实现导出Excel文件，并设置行高，宽度，合并单元格等。

一、省流

        Demo

        代码

二、安装xlsx和xlsx-style-fixedver

  1. npm install xlsx
  2. npm install xlsx-style-fixedver

        xlsx免费版只支持基础的生成xlsx文件，并不支持设置各种样式，不过好在有大神封装了xlsx-style这个库，可以让我们白嫖xlsx付费版的功能。

        不过现在xlsx-style这个库现在已经没有人维护了，且xlsx-style不支持修改行高，想要修改行高的话需要修改源码，所以我们现在选择xlsx-style-fixedver这个库，该库对xlsx-style进行了修复，默认支持修改行高。注意：使用xlsx-style-fixedver时必须要设置行高，不然会报错！！！

三、可能遇到的问题

        首先确定下库的版本：

New Image

1、Module not found: Error: Can''t resolve ''fs''

New Image

在vue.config.js中添加如下代码

  1.   configureWebpack: {
  2.     externals: {
  3.       fs: require(''fs'')
  4.     },
  5.   }

2、jszip is not a constructor

New Image

首先安装下面这个库

npm install node-polyfill-webpack-plugin

在vue.config.js中添加如下代码

  1. const NodePolyfillPlugin = require(''node-polyfill-webpack-plugin'')
  2. configureWebpack: {
  3.   plugins: [new NodePolyfillPlugin()]
  4. }

最终vue.config.js代码如下：

  1. const NodePolyfillPlugin = require(''node-polyfill-webpack-plugin'')
  2. module.exports = {
  3.   publicPath: ''./'',
  4.   lintOnSave: false,
  5.   configureWebpack: {
  6.     externals: {
  7.       fs: require(''fs'')
  8.     },
  9.     plugins: [new NodePolyfillPlugin()]
  10.   }
  11. }
  12.

四、封装方法

代码都有注释，且本身也比较简单，应该都是能看懂的

  1. import * as XLSX from ''xlsx/xlsx.mjs''
  2. import XLSXStyle from ''xlsx-style-fixedver''
  3. /**
  4.  * 将 String 转换成 ArrayBuffer
  5.  * @method 类型转换
  6.  * @param {String} [s] wordBook内容
  7.  * @return {Array} 二进制流数组
  8.  */
  9. function s2ab(s) {
  10.   let buf = null
  11.   if (typeof ArrayBuffer !== ''undefined'') {
  12.     buf = new ArrayBuffer(s.length)
  13.     const view = new Uint8Array(buf)
  14.     for (let i = 0; i !== s.length; ++i) {
  15.       view[i] = s.charCodeAt(i) & 0xFF
  16.     }
  17.     return buf
  18.   }
  19.   buf = new Array(s.length)
  20.   for (let i = 0; i !== s.length; ++i) {
  21.     // 转换成二进制流
  22.     buf[i] = s.charCodeAt(i) & 0xFF
  23.   }
  24.   return buf
  25. }
  26.  
  27. /**
  28.  * 方案一：利用 URL.createObjectURL 下载 （以下选用）
  29.  * 方案二：通过 file-saver 插件实现文件下载
  30.  * @method 文件下载
  31.  * @param {Object} [obj] 导出内容 Blob 对象
  32.  * @param {String} [fileName] 文件名 下载是生成的文件名
  33.  * @return {void}
  34.  */
  35. function saveAs(obj, fileName) {
  36.   const aLink = document.createElement(''a'')
  37.   // eslint-disable-next-line eqeqeq
  38.   if (typeof obj == ''object'' && obj instanceof Blob) {
  39.     aLink.href = URL.createObjectURL(obj) // 创建blob地址
  40.   }
  41.   aLink.download = fileName
  42.   aLink.click()
  43.   setTimeout(function() {
  44.     URL.revokeObjectURL(obj)
  45.   }, 100)
  46. }
  47.  
  48. /**
  49.  * @method 数据导出excel
  50.  * @param {Object} [data] 工作表数据内容
  51.  * @param {String} [name] 导出excel文件名
  52.  * @param {Number} [merges] 表头合并列数
  53.  * @param {Boolean} [save] 直接下载或返回bolb文件
  54.  */
  55. export function exportExcel(data, name, merges, save = true) {
  56.   return new Promise((resolve) => {
  57.     let index = 0
  58.     // 合并单元格 s:开始位置 e:结束位置 r:行 c:列
  59.     const datamerges = [
  60.       // 实际情况根据业务需求进行
  61.       { s: { c: 0, r: 0 }, e: { c: merges, r: 0 }},
  62.       { s: { c: 1, r: data.length + 1 }, e: { c: 3, r: data.length + 1 }}
  63.     ]
  64.     const worksheet1 = XLSX.utils.json_to_sheet(data, { origin: ''A2'' }) // origin:指定某一行开始导入表格数据
  65.     const itemWidth = []
  66.     const itemHeight = []
  67.     worksheet1[''!merges''] = datamerges
  68.     worksheet1.A1 = {
  69.       t: ''s'',
  70.       v: name
  71.     }
  72.     const total = `B${data.length + 2}`
  73.     worksheet1[total] = {
  74.       t: ''s'',
  75.       v: ''合计''
  76.     }
  77.     for (const key in worksheet1) {
  78.       index++
  79.       // 前两行高度为45，其后行高为25
  80.       if (index <= 2) {
  81.         itemHeight.push({ hch: 45 })
  82.       } else {
  83.         itemHeight.push({ hch: 25 })
  84.       }
  85.       // 所有单元格居中
  86.       if (key !== ''!cols'' && key !== ''!merges'' && key !== ''!ref'' && key !== ''!rows'') {
  87.         worksheet1[key].s = {
  88.           alignment: {
  89.             horizontal: ''center'',
  90.             vertical: ''center''
  91.           }
  92.         }
  93.       }
  94.       // 所有单元格列宽为15
  95.       itemWidth.push({ wch: 15 })
  96.       // A1单元格加粗居中
  97.       if (key === ''A1'') {
  98.         worksheet1[key].s = {
  99.           font: {
  100.             bold: true,
  101.             sz: 20
  102.           },
  103.           alignment: {
  104.             horizontal: ''center'',
  105.             vertical: ''center''
  106.           }
  107.         }
  108.       }
  109.       if (key === total) {
  110.         worksheet1[key].s = {
  111.           font: {
  112.             bold: true
  113.           },
  114.           alignment: {
  115.             horizontal: ''center'',
  116.             vertical: ''center''
  117.           }
  118.         }
  119.       }
  120.       // 表头加粗居中
  121.       if (key.replace(/[^0-9]/ig, '''') === ''2'') {
  122.         worksheet1[key].s = {
  123.           font: {
  124.             bold: true
  125.           },
  126.           alignment: {
  127.             horizontal: ''center'',
  128.             vertical: ''center''
  129.           }
  130.         }
  131.       }
  132.     }
  133.     worksheet1[''!cols''] = itemWidth // 列宽
  134.     worksheet1[''!rows''] = itemHeight // 行高
  135.     // return
  136.     const sheetNames = Object.keys({ ''总表'': worksheet1 })
  137.     const workbook = {
  138.       SheetNames: sheetNames, // 保存的工作表名
  139.       Sheets: { ''总表'': worksheet1 } // 与表名对应的表数据
  140.     }
  141.     // // excel的配置项
  142.     const wopts = {
  143.       bookType: ''xlsx'', // 生成的文件类型
  144.       bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
  145.       type: ''binary''
  146.     }
  147.     // attempts to write the workbook
  148.     // const wbout = styleXLSX.write(workbook, wopts)
  149.     const wbout = XLSXStyle.write(workbook, wopts)
  150.     try {
  151.       wbout.then(res => {
  152.         const wbBlob = new Blob([s2ab(res)], {
  153.           type: ''application/octet-stream''
  154.         })
  155.         if (save) {
  156.           saveAs(wbBlob, name + ''.'' + ''xlsx'')
  157.         } else {
  158.           resolve(wbBlob)
  159.         }
  160.       })
  161.     } catch (error) {
  162.       const wbBlob = new Blob([s2ab(wbout)], {
  163.         type: ''application/octet-stream''
  164.       })
  165.       if (save) {
  166.         saveAs(wbBlob, name + ''.'' + ''xlsx'')
  167.       } else {
  168.         resolve(wbBlob)
  169.       }
  170.     }
  171.   })
  172. }

使用方法：

其中testData根据自己的业务需求进行修改就行了。

  1. <template>
  2.   <div>
  3.     <span class="btn" @click="createExcel">点击生成Excel</span>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. import { exportExcel } from ''@/utils''
  9. export default {
  10.   name: ''XlsxDown'',
  11.   props: {
  12.     msg: String
  13.   },
  14.   methods: {
  15.     createExcel() {
  16.       // 测试数据
  17.       const testData = [
  18.         {
  19.           ''序号'': 1,
  20.           ''表头1'': 1,
  21.           ''表头2'': 2,
  22.           ''表头3'': 3,
  23.           ''表头4'': 4,
  24.           ''表头5'': 5,
  25.         },
  26.         {
  27.           ''序号'': 2,
  28.           ''表头1'': 11,
  29.           ''表头2'': 22,
  30.           ''表头3'': 33,
  31.           ''表头4'': 44,
  32.           ''表头5'': 55,
  33.         },
  34.         {
  35.           ''序号'': 3,
  36.           ''表头1'': 111,
  37.           ''表头2'': 222,
  38.           ''表头3'': 333,
  39.           ''表头4'': 444,
  40.           ''表头5'': 555,
  41.         },
  42.       ]
  43.       const temp = {
  44.         ''序号'': testData.length + 1
  45.       }
  46.       temp[''表头4''] = 0
  47.       temp[''表头5''] = 0
  48.       testData.map((item) => {
  49.         temp[''表头4''] += parseFloat(item[''表头4''])
  50.         temp[''表头5''] += parseFloat(item[''表头5''])
  51.       })
  52.       testData.push(temp)
  53.       exportExcel(testData, ''Excel下载'', Object.keys(testData[0]).length - 1)
  54.     }
  55.   }
  56. }
  57. </script>
  58. <!-- Add "scoped" attribute to limit CSS to this component only -->
  59. <style scoped>
  60.   .btn {
  61.     border: 1px solid rgba(30,128,255,.3);
  62.     background-color: rgba(30,128,255,.05);
  63.     border-radius: 4px;
  64.     cursor: pointer;
  65.     padding: 10px;
  66.     color: #1e80ff;
  67.     font-size: 14px;
  68.   }
  69. </style>

标签： 技术社区

相关文章