美文网首页
vue 本地导入excel ,下载excel模板

vue 本地导入excel ,下载excel模板

作者: 小娜同学 | 来源:发表于2021-10-12 11:50 被阅读0次

根据示例来实现效果

示例

上传Excel,并下载模板

依赖:npm install xlsx --save

第一:为了快速方便的吧 Excel的内容代入到表格里,实现效果,点击上传Excel按钮。
第二:下载Excel模板,首先,本地的文档存进项目里,最好是放在public目录下,避免项目打包的时候,被压缩篡改。
第三:话不多说,代码展示如下,请自行摘要

<template>
   <div>
<el-upload
    class="upload-demo"
    ref="upload"
    action=""
    :format="['xls','xlsx']"
    accept=".xls,.xlsx"
    :auto-upload="false"
    :file-list="fileList"
    :on-change="handleChange"
    multiple
    :show-file-list="false"
  >

  <el-button class="pan-btn yellow-btn ">上传Excel</el-button>

</el-upload>
<button @click="downloadTemplate" class="pan-btn blue-btn mx-3">下载Excel模板</button></div>
</template>
export default {
    name: "index",
    data () {
      return {
        fileList: [],
        file: []
      },
methods: {
      downloadTemplate(){
          //注意路径,前面不要加 ./ 会形成相对路径,点击下载不了。
          window.open('/online.xls', '_blank')
        },
      handleChange(file,fileList){
          this.loading= true
          this.show= true
          let data= []
          this.fileList= [fileList[fileList.length- 1]]; // 只能上传一个Excel,重复上传会覆盖之前的
          this.file= file.raw;
          let reader= new FileReader()
          let _this= this
          reader.readAsArrayBuffer(this.file)
          reader.onload= function () {
             let buffer= reader.result
              let bytes= new Uint8Array(buffer)
              let length= bytes.byteLength
              let binary= ''
        for (let i= 0; i< length; i++) {
              binary+= String.fromCharCode(bytes[i])
        }
        let XLSX= require('xlsx')
        let wb= XLSX.read(binary, {
            type: 'binary'
      })
        let outdata= XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
          console.log('这是上传表格', outdata)
    }
    }
  }
}

相关文章

网友评论

      本文标题:vue 本地导入excel ,下载excel模板

      本文链接:https://www.haomeiwen.com/subject/crudoltx.html