快捷導(dǎo)航

vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法(后端接口導(dǎo)出、前端直接做導(dǎo)出)

更新時(shí)間：2024年05月09日 11:27:56 作者：沐沐長(zhǎng)記錄

這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法的相關(guān)資料,文中介紹的是后端接口導(dǎo)出、前端直接做導(dǎo)出,通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、調(diào)后端接口做導(dǎo)出效果

實(shí)現(xiàn)效果：導(dǎo)出列表數(shù)據(jù)

導(dǎo)出的內(nèi)容：

后臺(tái)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單一點(diǎn)，只要后端配合寫接口即可

代碼：放在導(dǎo)出事件里進(jìn)行調(diào)整即可完成導(dǎo)出效果

axios({
        method: "get",  //請(qǐng)求方式
        url: url,   //接口
        params: params,
        responseType: 'blob'  
      }).then((res) => {
        if (+res.status == 200) {
          var blob = res.data;
          var filename = "錄用統(tǒng)計(jì)";  
          saveAs(
            new Blob([blob], {
              type: "application/vnd.ms-excel",
            }),
            filename   //導(dǎo)出文件的文件名可自定義
          );
          
        }
      }).catch(err => {
        console.log(err)
      })

二、前端使用xlxs庫(kù)進(jìn)行導(dǎo)出操作

效果如上：個(gè)人認(rèn)為調(diào)接口導(dǎo)出的表格更美觀一點(diǎn)

操作如下：

首先安裝我們需要的xlxs庫(kù)：

npm install xlsx

接著在我們項(xiàng)目文件夾/src/assets/js創(chuàng)建一個(gè)excel-tool.js文件：

excel-tool.js文件：（不需要修改，可根據(jù)需求進(jìn)行改動(dòng)）

/**
 * excel 工具類
 *
 * 基于 js-xlsx 模塊對(duì) excel 進(jìn)行讀寫
 * 官方文檔可參照： https://www.npmjs.com/package/xlsx#acquiring-and-extracting-data
 */
import { utils, read, writeFile } from 'xlsx'

/**
 * sheet 表頭解析
 * @param sheet{WorkSheet} sheet 對(duì)象
 * @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 對(duì)象
 * @returns {Promise<{}>} 返回的對(duì)象 { 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
}

/**
 * 輸出數(shù)據(jù)到 excel
 * @param dataList {Object[]} 數(shù)據(jù)列表
 * @param dataKey {String[]} 需要導(dǎo)出的數(shù)據(jù)對(duì)象 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
}

頁(yè)面中具體使用：

import { write2File } from "../../assets/js/excel-tool";  //引入excel-tool文件
import { GetNews } from "../../api/api";  //調(diào)接口拿數(shù)據(jù)
 
<script>
    export default {
  name: "articleList",
  data() {
    return {
      dataKey: [
        "title",
        "programName",
        "articelisturl",
        "draftUser",
        "groupName",
        "state",
        "draftTime"
      ],
      firstRowNames: [
        "標(biāo)題",
        "所屬欄目",
        "文章地址",
        "擬稿人",
        "擬稿單位",
        "狀態(tài)",
        "擬稿日期"
      ],
      filename: "文章列表",
    };
    methods: {
    //導(dǎo)出
    daochu() {
      write2File(
        this.tableData,  //接口數(shù)據(jù)
        this.dataKey,     //表頭對(duì)應(yīng)的數(shù)據(jù)
        this.firstRowNames,  //表頭
        this.filename  //導(dǎo)出內(nèi)容命名
      );
    },
    //接口數(shù)據(jù)
    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);
           //強(qiáng)制刷新
          this.$forceUpdate();
        }
      });
    },
    
   }
    
  },
</script>

總結(jié)

到此這篇關(guān)于vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue2項(xiàng)目導(dǎo)出方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: