vue插件-前端excel導出的幾種方式、導入excel文件

vue插件-前端導出Excel （可導出全量數據）

安裝依賴依賴

npm i -s file-saver@2.0.2
npm install -s xlsx@0.15.1

頁面下載按鈕

 <w-button type="success" @click="downLoadAll">下載</w-button>

methods中的方法

    // 下載列表所有數據
    async downLoadAll () {
      this.loading = true

　　 let params = { // 參數獲取

 　　　　search: this.form.search,

      pageSize = 2000 // 設置獲取的數據數量
      pageNumber = 1
　　}
      try {
        let requestType = {
          params: params,
          headers: {'Content-Type': 'application/json'}
        }
        let res = await this.$http(this.$api.getAssListDatas, params, requestType)
        if (!this.$utils.fetchSuccess(res.data.status)) return
        let dataThis = res.data.data.rows
        require.ensure([], () => {
          const {exportJsonToExcel} = require('@/excel/Export2Excel')
          const tHeader = ['姓名', '身份證號', '人群分類',  '評估日期']  // 設置excel頭信息
          const filterVal = ['name','idCardNo', 'crowdCategoryName', 'assessDate']
          const list = dataThis
          const data = this.formatJson(filterVal, list)
          exportJsonToExcel([], tHeader, data, '老年人健康列表', [])
        })
      } catch (err) {
        console.log(err, 'err')
      } finally {
        this.loading = false
      }
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }

 

 

vue插件-前端導出Excel表格-（當前頁面展示的列數據）

安裝依賴2個依賴

cnpm install --save xlsx file-saver
組件里頭引入
import FileSaver from 'file-saver' 
import XLSX from 'xlsx'

組件methods里寫一個方法

exportExcel () {
         /* generate workbook object from table */
         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))  //表格的id
         /* get binary string as output */
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },

 

vue插件-前端批量打包導出文件（.zip）

安裝依賴

npm install -S axios
npm install -S jszip
npm install -S file-saver
組件里頭引入
import JSZip from 'jszip'
import fileSaver from 'file-saver'
import axios from 'axios'

js中引入方法

export function getFile(url) {
  return request({
    url: url,
    method: 'get',
    responseType: 'blob'
  })
}

組件methods里寫一個方法

handleBatchDownload() {
  const dataFile = this.ftypeList  //數據源
  const zip = new JSZip()
  const cache = {}
  const promises = []
  dataFile.forEach(item => {
    const promise = getFile(item.url).then(data => { // 下載文件, 並存成ArrayBuffer對象
      const arr_name = item.url.split('/')
      const file_name = item.typeName + arr_name[arr_name.length - 1] //文件名稱
      zip.file(file_name, data, { binary: true }) // 逐個添加文件
      cache[file_name] = data
    })
    promises.push(promise)
  })
  Promise.all(promises).then(() => {
    zip.generateAsync({ type: 'blob' }).then(content => { // 生成二進制流
      FileSaver.saveAs(content, this.currentTime + '復工前准備事項.zip') // 利用file-saver保存文件
    })
  })
},

this.ftypeList格式圖

 

vue插件-前端批量打包導出文件（Excel表格）

安裝依賴

npm install xlsx@0.16.0 --s // 高版本使用有問題，用這個版本可以

組件里引入

import XLSX from 'xlsx'

html中

<div class="button-area">        
        <w-upload
          class="upload-demo"
          ref="upload"
          action="/"
          :on-change="excelChange"
          :show-file-list="false"
          :auto-upload="false">
          <w-button slot="trigger" type="primary" >批量導入</w-button>
        </w-upload>
        <div><w-button type="warning" >日志查看</w-button></div>
      </div>

methods里導入方法

 // excel 導入
excelChange (file) {
      this.importData = this.readExcel(file)
      console.log(this.importData)
  },
 // 解析excel
readExcel (file) {
      const types = file.name.split('.')[1]
      const fileType = [
        'xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'
      ].some(item => item === types)
      if (!fileType) {
        this.$Message('格式錯誤！請重新選擇')
        return
      }
      this.$emit('showLoading', true)
      const reader = new FileReader()
      let result = []
      reader.onload = function (e) {
        const data = e.target.result
        const wb = XLSX.read(data, {
          type: 'binary',
          cellDates: true
        })
 
        wb.SheetNames.forEach((sheetName) => {
          result.push({
            sheetName: sheetName,
            sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName])
          })
        })
      }
 
      reader.readAsBinaryString(file.raw)
      if (result) {
        console.log(result)
      }
      return result
    },

   // 格式化入參 [處理對應的select值對應轉換]

    paramsFormate (value, options) {

      let newValue = ''

      options.forEach((item) => {

        if (item.label === value) {

          newValue = item.value

        }

      })

      return newValue

    },

watch中

watch: {
    importData: {
// 必填項攔截 async handler (newV, oldV) {
        if (newV && newV.length > 0) {
          let keys = Object.keys(newV[0].sheet[0])
          if (keys.indexOf('身份證') < 0) {
            this.$emit('showLoading', false)
            this.$Message('身份證必填!')
            return
          }
          if (keys.indexOf('采樣方式') < 0) {
            this.$emit('showLoading', false)
            this.$Message('采樣方式必填!')
            return
          }
          if (keys.indexOf('采樣時間') < 0) {
            this.$emit('showLoading', false)
            this.$Message('采樣時間必填!')
            return
          }
 // 表格數據解析
          let impdata = newV[0].sheet
          let importDataArray = JSON.parse(JSON.stringify(impdata)
            .replace(/身份證/g, 'sfzh').replace(/病人ID/g, 'brid').replace(/姓名/g, 'xm')
            .replace(/申請單號/g, 'sqdh').replace(/性別/g, 'sex').replace(/采樣方式/g, 'cyfs')
            .replace(/采樣時間/g, 'cysj').replace(/作廢時間/g, 'zfsj').replace(/采樣條碼/g, 'tmh')
            .replace(/發布時間/g, 'fbsj').replace(/核酸參考結果/g, 'jg')
            .replace(/N基因值/g, 'ngen'))
         // 參數處理
          if (importDataArray) {
            importDataArray.forEach((item) => {
              if (item.sex.length > 0) {
                item.sex = this.paramsFormate(item.sex, this.sexOPtions)
              }
            })
          }
          console.log(importDataArray) // 傳給后台解析后的數據
          let param = {
            jgdm: this.jgdm,
            excelItemDtoList: importDataArray
          }
          const res = await baseDataApi.queryHistoryCleanRecord(param)
          if (res.data.data) {
            if (res.data.data.code === 'F') {
              this.$emit('showLoading', false)
              this.rkmxObject.rkmxList = []
              if (res.data.data.result) {
                let showdatatable = res.data.data.result.excelErrorItemDtoList
                this.$emit('showLoadingError', true, showdatatable)
              } else {
                this.$Message(res.data.data.message)
              }
            } else {
              this.rkmxObject.rkmxList = res.data.data.result.wmRkmxVoList
              this.editIndex = this.rkmxObject.rkmxList.length % this.pageSize
              this.$emit('showLoading', false)
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  }

解析出的j'son數據