Vue导出模板、使用前端js办法导出表格数据、导入表格前端读取表格数据、导入表格发送后端读取数据

以下是几种用的较多的函数方法，可以参考使用。

// 導出1
    myExport() {
      // post請求文件寫法1
      const url = 'http://XXXX/XXXX/XXXX/XXXX'
      const formData = new FormData()
      formData.append('file', '123')
      this.axios({
        method: 'post',
        url: url,
        data: formData,
        responseType: 'blob' // 表明返回服務器返回的數據類型
      }).then(_ => {
        const content = _
        const blob = new Blob([content])
        const fileName = '測試表格.xls'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const aLink = document.createElement('a')
          aLink.download = fileName
          aLink.style.display = 'none'
          aLink.href = URL.createObjectURL(blob)
          aLink.setAttribute('target', '_blank')
          document.body.appendChild(aLink)
          aLink.click()
          URL.revokeObjectURL(aLink.href) // 释放URL 对象
          document.body.removeChild(aLink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
      // post請求文件寫法2
    },

<template>
  <div>通用函數頁面</div>
</template>
<script>
// 導出表格數據1
import toExcel from '../common.js'
// 導出表格數據2
export default {
  methods: {
    // 導出表格數據1
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    myGetDate() {
      // 这段每个都加了数据处理成的格式备注，很容易明白
      const th = ['參數1', '參數2', '參數3', '參數4']
      const filterVal = ['name', 'age', 'grade', 'score']
      const dataSource = [
        { name: '值1', age: '值2', grade: '值3', score: '值4' },
        { name: '值1', age: '值2', grade: '值3', score: '值4' }
      ]
      var data = this.formatJson(filterVal, dataSource)
      // data得到的值为[["小绵羊","12","六年级","100"],["小猪猪,"23","五年级","98"]]
      // 注意：二维数组里的每一个元素都应是字符串类型，否则导出的表格对应单元格为空
      toExcel({ th, data, fileName: '设备导出数据', fileType: 'xlsx', sheetName: 'sheet名' })
    },
    // 導出表格數據2
    // 導出模板方法-get、兩種-post、一種
    // get導出模板方案一：通过创建iframe的方式1
    myGetExport1() {
      // get請求寫法1
      const elemIF = document.createElement('iframe')
      elemIF.src = ''
      elemIF.style.display = 'none'
      document.body.appendChild(elemIF)
      // get請求寫法2
    },
    // get導出模板方案一：通过创建iframe的方式2
    // get導出模板方案二：不太好用哦~~通过a标签的链接向后端服务发get请求，接收后端的文件流1
    downloadTemplate() {
      const url = ''
      const a = document.createElement('a')
      a.style.display = 'none'
      a.setAttribute('target', '_blank')
      a.href = url
      a.click()
      // window.open(url);
    },
    // get導出模板方案二：通过a标签的链接向后端服务发get请求，接收后端的文件流2
    // post方法導出模板方案一fetch：1
    myFetch() {
      requestData = {
        no: this.noArr, //這個給的是勾選的no列表
        // no: this.myLists,//這個給的是勾選的id列表
        partsn: this.data4.map(_ => (_ = _.no))
      }
      //下载execl文件
      const url = ''
      fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestData)
      })
        .then(res => res.blob())
        .then(data => {
          this.showSpin = false
          let blobUrl = window.URL.createObjectURL(data)
          const a = document.createElement('a')
          a.style.display = 'none'
          a.setAttribute('target', '_blank')
          a.download = '<List>'
          a.href = blobUrl
          a.click()
        })
    },
    // post方法導出模板方案一fetch：2
    // post方法導出模板方案二axios：1
    myPostExport() {
      // post請求文件寫法1
      const url = ''
      const formData = new FormData()
      formData.append('file', '123')
      this.axios({
        method: 'post',
        url: url,
        data: formData,
        responseType: 'blob' // 表明返回服務器返回的數據類型
      }).then(_ => {
        const content = _
        const blob = new Blob([content])
        const fileName = '測試表格.xls'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const aLink = document.createElement('a')
          aLink.download = fileName
          aLink.style.display = 'none'
          aLink.href = URL.createObjectURL(blob)
          aLink.setAttribute('target', '_blank')
          document.body.appendChild(aLink)
          aLink.click()
          URL.revokeObjectURL(aLink.href) // 释放URL 对象
          document.body.removeChild(aLink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
      // post請求文件寫法2
    },
    // post方法導出模板2
    // 導入表格的方法1
    // 導入表格的方法2
    // 導入文本讀取文本的方法1
    myUploadTxt(e) {
      const myData = {
        status: '',
        result: []
      }
      if (e.target.files[0]) {
        console.log(e.target.files[0].type)
        if (e.target.files[0].type === 'text/plain') {
          const fileReader = new FileReader()
          fileReader.readAsText(e.target.files[0], 'utf-8')
          fileReader.onload = () => {
            console.log(fileReader.result)
          }
          // fileReader.readAsText(e.target.files[0]);
        } else {
          myData.status = 'error'
          return myData
        }
      }
    },
    // 導入文本讀取文本的方法2
    // 導入文本讀取表格的方法1
    // 上传表格1
    readExcel(e) {
      //表格导入
      const files = e.target.files
      // console.log(files);
      if (files.length <= 0) {
        //如果没有文件名
        return false
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        // this.msg.error('上传格式不正确，请上传xls或者xlsx格式');
        return false
      }

      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          })
          const wsname = workbook.SheetNames[0] //取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) //生成json表格内容
          // console.log(ws);
          const excellist = [] //清空接收数据
          //编辑数据
          for (var i = 0; i < ws.length; i++) {
            excellist.push(ws[i])
          }
          // 此时得到的是一个内容是对象的数组需要处理
          // console.log(excellist);
          let arr1 = excellist.map(_ => Object.values(_)[0])
          // console.log(arr1);
          this.resultArr = arr1.map((_, idx) => {
            return {
              id: idx + 1,
              name: idx + 1,
              age: _
            }
          })
          // console.log(this.resultArr)
        } catch (e) {
          // console.log('出错了')
          return false
        }
      }
      fileReader.readAsBinaryString(files[0])
      // 如果需要後台處理表格數據，就執行如下操作1
      // 如果是發送後台解析，就這樣發送1
      // let url =  '';
      // let myformdataFile = {
      //   file: e.target.files[0]
      // }
      // if (e.target.files[0]) {
      //   this.http.post(url, myformdataFile).subscribe((res: any) => {
      //     if (res.status == 'success') {
      //       console.log(res)
      //     } else {
      //       this.msg.warning(res.message);
      //       return false;
      //     }
      //   });
      // }
      // 如果是發送後台解析，就這樣發送2
      // 如果需要後台處理表格數據，就執行如下操作2
    },
    // 上传表格2
    // 導入文本讀取表格的方法2
    // 輸入文本檢測過濾空格函數形成數組
    // 用戶輸入數據使用空格，逗號，隔開，我們需要分解成數組1
    // inputvalue  字符串格式
    textValue(inputvalue) {
      if (inputvalue) {
        // 當用戶輸入用空格隔開時候使用
        let resultArr = inputvalue
          .split(/[,，\s]+/gm)
          .filter(_ => _)
          .map(item => {
            // 當用戶輸入用逗號隔開時候使用
            // let resultArr = inputvalue.split(/[,，\s]+/gm).filter(_ => _).map(item => {
            if (item.length != 0) {
              return item
            } else {
              // console.log(item)
              // this.msg.error('請重輸');
              this.resultArr = []
              return false
            }
          })
        // console.log(resultArr)
        return resultArr
      } else {
        // this.msg.error('輸入不能空');
        return false
      }
    }
    // 用戶輸入數據使用空格，逗號，隔開，我們需要分解成數組2
  }
}
</script>

关联js

// 導出表格專用代碼1
/** ***********这段直接复制就好，看明白最好，不明白也不影响使用*************/
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'

function s2ab(s) {
  const buf = new ArrayBuffer(s.length)
  const view = new Uint8Array(buf)
  for (let i = 0; i !== s.length; ++i) {
    view[i] = s.charCodeAt(i) & 0xFF
  }
  return buf
}
function data2ws(data) {
  const ws = {}
  const range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } }
  for (let R = 0; R !== data.length; ++R) {
    for (let C = 0; C !== data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R
      if (range.s.c > C) range.s.c = C
      if (range.e.r < R) range.e.r = R
      if (range.e.c < C) range.e.c = C
      const cell = { v: data[R][C] }
      if (cell.v == null) continue
      const cellRef = XLSX.utils.encode_cell({ c: C, r: R })
      if (typeof cell.v === 'number') cell.t = 'n'
      else if (typeof cell.v === 'boolean') cell.t = 'b'
      else if (cell.v instanceof Date) {
        cell.t = 'n'
        cell.z = XLSX.SSF._table[14]
      } else {
        cell.t = 's'
      }
      ws[cellRef] = cell
    }
  }
  if (range.s.c < 10000000) {
    ws['!ref'] = XLSX.utils.encode_range(range)
  }
  return ws
}
function Workbook() {
  if (!(this instanceof Workbook)) {
    return new Workbook()
  }
  this.SheetNames = []
  this.Sheets = {}
}
/*
* th => 表头
* data => 数据
* fileName => 文件名
* fileType => 文件类型
* sheetName => sheet页名
*/
// 导出封装好的方法
export default function toExcel({ th, data, fileName, fileType, sheetName }) {
  data.unshift(th)
  const wb = new Workbook()
  const ws = data2ws(data)
  sheetName = sheetName || 'sheet1'
  wb.SheetNames.push(sheetName)
  wb.Sheets[sheetName] = ws
  fileType = fileType || 'xlsx'
  var wbout = XLSX.write(wb, { bookType: fileType, bookSST: false, type: 'binary' })
  fileName = fileName || '列表'
  saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), `${fileName}.${fileType}`)
}
// 導出表格專用代碼2