VUE导入功能/下载功能

 

导入功能

参考：blog.csdn.net/bingbingjia…

但是我不喜欢那种格式，它那种格式，还能多导几个文件？咱这只支持单个文件。

 

我改下，我喜欢这种风格的，按钮样式可以修改。简洁方便。

 

按钮的实现：代码就两行，他的好几行

<input type="file" name="file" id="fileid" accept=".xlsx,.xls,.csv" @change="importFile()" style="margin-left:0.1rem;" >

<input type="button" id="daoru" value="导入" style="margin-left:0.02rem;" @click="httpRequest()">

方法就参照，记得 import XLSX from 'xlsx';：

 importFile(){
            var objFile = document.getElementById('fileid').files[0];
            var objStr = /\.(xlsx|xls|csv)$/; 
            if(!objStr.test(objFile.name)){
                alert("选择的文件格式不对，请选对excel表格");
                return false;
            }
           this.thisObj=objFile;//这里就是代替它的e，传给下面的方法
           console.log("sssssddd",this.thisObj)
         },
//导入按钮
         httpRequest() {
            // var e = this.thisObj;
            let file = this.thisObj // .file文件信息
            
            console.log("file",file)

                if (!file) {   // 没有文件
                return false
                } else if (!/\.(xls|xlsx|csv)$/.test(file.name.toLowerCase())) {
                    this.$message.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 exlname = workbook.SheetNames[0]   // 取第一张表
                        const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) //生成json表格内容
                        this.elsxData = exl
                        console.log("导入表格内容",this.elsxData)
                        // document.getElementsByName('file')[0].value = '' 
                        // 根据自己需求，可重置上传value为空，允许重复上传同一文件
                    } catch (e) {
                        console.log('导入表格出错了：：')
                        return false
                    }
                }
            fileReader.readAsBinaryString(file)
	    },

 

接下来就是VUE

下载功能

 参考网上很多，但是很多都没有实现，那是因为我给自己埋了坑。

 html样式随便写

<a download="moban.xlsx" :href="downloadUrl"  id="moban" class="downloadBtn"  @click="downloadmoban()">下载模板</a>

<el-link download="moban.xlsx" :href="downloadUrl" id="moban" class="downloadBtn" type="primary"  @click="downloadmoban()">

<el-tag>
       <i class="el-icon-download" />
       <a :href="downloadUrl">点击下载模版</a>
 </el-tag>

 

要什么样式自己写。我得比较简单，点击下载：

我的文件就放在 /项目/public/filie/moban.xlsx路径下

建议放在这里，因为如果项目build出来那就怕找不到，所有建议放在这个位置。因为后面打包后下载的路径： http://192.168.0.1:8888/file/moban.xlsx  ，你直接点击你自己的地址试试能不能下载，如果可以，路径没错

url路径会变化，修改麻烦。我们可以 /file/moban.xlsx 这么写

方法一：

直接在data中定义实现。

 data() {
    return {
        
   downloadUrl: "/file/moban.xlsx", // 模板下载文件地址

  }
 }

这种方法在Html样式中不需要click点击事件，只需要绑定链接href，注意：只需要:href="downloadUrl"绑定，我之前就因为写错了单词herf，导致功能失败。

这种方法是可以的，如果失败，请检查下单词，或者路径是否写错

 

方法二：

直接就是click的函数方法，也就是点击事件，实际也就是链接方式。

downloadmoban() {
      let hrefStr = encodeURI("/file/moban.xlsx");
      window.location.href = hrefStr;
    },