zoukankan      html  css  js  c++  java
  • vue 导出excel文件,(支持office和wps版本)

    前言

    最新因为项目需要,要弄一个纯前端开发的excel导出功能,一开始我用了vue-json-excel 效果不错,改改标签内容,和标题数据就能用,测试的时候人家用office就提示文件损坏,我那个时候用的是wps还浑然不知。最后还是改用别的插件处理了,都是血的教训啊!
    所以现在就来总结一下使用心得

    技术准备

    引入工具 file-saver、xlsx、script-loader

    //安装依赖
    npm install -S file-saver xlsx
    
    npm install -D script-loader
    

    准备两个处理结构的js文件Blob.js和 Export2Excel.js。
    这里贴下下载地址:

    链接: https://pan.baidu.com/s/143Rn4wLpr8_T9eke_rk3aQ 提取码: 2my4 
    
    或者:http://xiazai.jb51.net/201708/yuanma/Export2Exce_jb51.rar
    

    src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js放进去。

    代码实现

    更改webpack.base.conf.js配置

    在resolve的alias: 
    'vendor': path.resolve(__dirname, '../src/vendor')
    

    在.vue文件中

    <template>
      <div class="OtherSettings_2">
        <h3>xxx列表</h3>
        <div class="table">
          <div class="export_excel">
           <button @click="export2Excel">导出Excel</button>
          </div>
          <table border="1" cellspacing="0" style="border-collapse:collapse;">
            <tr>
              <td>项目编号</td>
              <td>项目名称</td>
              <td>合同编号</td>
              <td>合同名称</td>
              <td>版本</td>
              <td>权益人</td>
              <td>过期时间</td>
            </tr>
            <tr v-for="(item,index) in coundHostList" :key="index">
              <td>{{item.number}}</td>
              <td>{{item.name}}</td>
              <td>{{item.htnumber}}</td>
              <td>{{item.htname}}</td>
              <td>{{item.version}}</td>
              <td>{{item.qyperson}}</td>
              <td>{{item.extime}}</td>
            </tr>
          </table>
        </div>
      </div>
    </template>
    

    script部分

    data(){
      return{
        coundHostList:[
            {
              number:'0001',
              name:'商品1',
              htnumber:'001',
              htname:'合同1',
              version:'1.0.0.1',
              qyperson:'张三',
              extime:'2020-03-13'
          },
           {
              number:'0002',
              name:'商品2',
              htnumber:'002',
              htname:'合同2',
              version:'1.0.0.2',
              qyperson:'赵四',
              extime:'2020-03-15'
          },
        ]
      }
      },
      methods:{
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
          },
        export2Excel() {
            require.ensure([], () => {
              const { export_json_to_excel } = require('../../../vendor/Export2Excel')
              const tHeader = ['项目编号','项目名称','合同编号','合同名称','版本','权益人','过期时间'];
              const filterVal = ['number', 'name', 'htnumber', 'htname','version', 'qyperson', 'extime', ];
              const list = this.coundHostList;
              const data = this.formatJson(filterVal,list);
              export_json_to_excel(tHeader, data, '商品管理列表');
            })
          },
      },
    

    功能说明

    1、export2Excel()中require的路径因个人项目结构不同可能需要单独调整,如果报module not found '../../Export2Excel.js'之类请自行修改路径。

    2、tHeader是每一栏的名称,需手动输入。filterVal是data中list的key值,也是要自己写的。

    const { export_json_to_excel } = require('../../../vendor/Export2Excel') //路径问题
    const tHeader = ['项目编号','项目名称','合同编号','合同名称','版本','权益人','过期时间'];

    3、这里记得要与data里面的list名称对应

    4、这里可定义导出的excel文件名想·

    export_json_to_excel(tHeader, data, '云主机列表');
    

    原文地址:https://www.cnblogs.com/yao5758/p/14377176.html

  • 相关阅读:
    struts2在result中使用el表达式碰到的问题
    JSP学习笔记—— jsp中include文件指令乱码的三种解决方案
    SSH整合,applicationContext.xml中配置hibernate映射文件问题
    struts上传文件失败 ContentType not allowed错误解决方法【转】
    mysql5 乱码问题解决方案
    java.lang.NoClassDefFoundError: org/apache/juli/logging/LogFactory的解决
    JQuery使用on绑定动态生成元素时碰到的问题
    Oracle异常处理
    C#窗口拦截键盘事件
    Oracle中动态SQL详解
  • 原文地址:https://www.cnblogs.com/caominjie/p/14836276.html
Copyright © 2011-2022 走看看