vue2项目导出操作实现方法(后端接口导出、前端直接做导出)_Vue.js

一、调后端接口做导出效果

实现效果：导出列表数据

导出的内容：

后台相对来说比较简单一点，只要后端配合写接口即可

代码：放在导出事件里进行调整即可完成导出效果

axios({
        method: "get",  //请求方式
        url: url,   //接口
        params: params,
        responsetype: 'blob'  
      }).then((res) => {
        if (+res.status == 200) {
          var blob = res.data;
          var filename = "录用统计";  
          saveas(
            new blob([blob], {
              type: "application/vnd.ms-excel",
            }),
            filename   //导出文件的文件名可自定义
          );
          
        }
      }).catch(err => {
        console.log(err)
      })

二、前端使用xlxs库进行导出操作

效果如上：个人认为调接口导出的表格更美观一点

操作如下：

首先安装我们需要的xlxs库：

npm install xlsx

接着在我们项目文件夹/src/assets/js创建一个excel-tool.js文件：

excel-tool.js文件：（不需要修改，可根据需求进行改动）

/**
 * excel 工具类
 *
 * 基于 js-xlsx 模块对 excel 进行读写
 * 官方文档可参照： https://www.npmjs.com/package/xlsx#acquiring-and-extracting-data
 */
import { utils, read, writefile } from 'xlsx'

/**
 * sheet 表头解析
 * @param sheet{worksheet} sheet 对象
 * @returns {string[]} 表头列表
 */
function readheaders(sheet) {
    const headernames = []
    // cell address format: { c: 0, r: 2 }  c: column   r: row
    // range format: { s: { c: 0, r: 2 }, e: { c: 1, r: 6 } }  s: start  e: end
    const range = utils.decode_range(sheet['!ref'])
    const firstrownum = range.s.r

    for (let columnnum = range.s.c; columnnum <= range.e.c; columnnum++) {
        const celladdress = { c: columnnum, r: firstrownum }
        const cell = sheet[utils.encode_cell(celladdress)]
        const name = cell && cell.t ? cell.w : `unknown-${columnnum}`
        headernames.push(name)
    }
    return headernames
}

/**
 * 读 excel
 * @param file file 对象
 * @returns {promise<{}>} 返回的对象 { sheetname: {headernames, datalist}}
 */
export const readfile = async(file) => {
    const ret = {}
    const bufferdata = await file.arraybuffer()
    const workbook = read(bufferdata)
    for (const sheetname in workbook.sheets) {
        const sheet = workbook.sheets[sheetname]
        const headernames = readheaders(sheet)
        const datalist = utils.sheet_to_json(sheet)
        ret[sheetname] = { headernames, datalist }
    }
    return ret
}

/**
 * 输出数据到 excel
 * @param datalist {object[]} 数据列表
 * @param datakey {string[]} 需要导出的数据对象 key
 * @param firstrownames {string[]} 表头
 * @param filename {string} 文件名
 */
export const write2file = (datalist, datakey, firstrownames, filename) => {
    const workbook = utils.book_new()
    const handleddatalist = datalist.map(data => datakey.map(key => data[key]))
    handleddatalist.unshift(firstrownames)
    const sheet = utils.aoa_to_sheet(handleddatalist)
    utils.book_append_sheet(workbook, sheet, filename)
    writefile(workbook, `${filename}.xlsx`)
}

export default {
    readfile,
    write2file
}

页面中具体使用：

import { write2file } from "../../assets/js/excel-tool";  //引入excel-tool文件
import { getnews } from "../../api/api";  //调接口拿数据
 
<script>
    export default {
  name: "articlelist",
  data() {
    return {
      datakey: [
        "title",
        "programname",
        "articelisturl",
        "draftuser",
        "groupname",
        "state",
        "drafttime"
      ],
      firstrownames: [
        "标题",
        "所属栏目",
        "文章地址",
        "拟稿人",
        "拟稿单位",
        "状态",
        "拟稿日期"
      ],
      filename: "文章列表",
    };
    methods: {
    //导出
    daochu() {
      write2file(
        this.tabledata,  //接口数据
        this.datakey,     //表头对应的数据
        this.firstrownames,  //表头
        this.filename  //导出内容命名
      );
    },
    //接口数据
    getnews(num) {
      if (num === 1) {
        this.currentpage = 1;
      }
      let data = {
        pagenum: this.currentpage,
        rowlength: this.pagesize,
        title: this.querydata.title || undefined,
        programcode: this.querydata.programcode || undefined
      };
      
      getnews(data).then(res => {
        if (res.code === 200) {
          this.tabledata = res.data.datalist;
          //此处为拼接的文章地址，可删除
          this.tabledata.foreach((item, index) => {
            return (item.articelisturl =
              this.url +
              "newsinfo?type=" +
              item.programname +
              "&code=" +
              item.uniquecode);
          });

          this.total = number(res.data.totalitems);
           //强制刷新
          this.$forceupdate();
        }
      });
    },
    
   }
    
  },
</script>