zoukankan      html  css  js  c++  java
  • vue+axios下载文件的实现

    HTML代码: <el-button size="medium" @click="download">下载表格</el-button>

    js代码:

    <script>

     import fileDownload from 'js-file-download' //下载js-file-download:npm install js-file-download
    methods: {
        //下载表格
        downloadHttpRequest(u, json, success, fail) {
          this.$http({
            method: "post",
            url: u,
            data: json,
            headers: {
              "Content-type": "application/json",
              "Access-Control-Allow-Methods": "*",
              "Access-Control-Allow-Origin": "*",
              "Access-Control-Allow-Headers": ["x-requested-with", "content-type"]
            },
            responseType: "blob"
          })
            .then(res => 
            {
                let resBlob = res.data // <--- store the blob if it is
                let resData = null
                let filename = 'attach.txt';  //给下载文件命名
                try {
                let resText =  new Promise((resolve, reject) => {
                    let reader = new FileReader()
                    reader.addEventListener('abort', reject)
                    reader.addEventListener('error', reject)
                    reader.addEventListener('loadend', () => {
                    resolve(reader.result)
                    })
                    reader.readAsText(resBlob)
                })
                resData = JSON.parse(resText) // <--- try to parse as json evantually
                } catch (err) {
                // ignore
                }
                if (resData) {
                    if (resData.error) {
                        // handle error
                    } else {
                        // handle data
                    }
                } else {
                // handle blob
                fileDownload(resBlob, filename)
                }
            });
        },
        download() {
          let _this = this;
          //下载表格接口/passport/getPassportNumberAndCode
          _this.downloadHttpRequest(
            "/ARPassport/passport/getPassportNumberAndCode",
            {
              code: 0,
              data: _this.$route.query.id
            },
            function success(res) {
            },
            function fail(err) {
            }
          );
        }
    }    
    </script>

    此方法参考了网上的资料

  • 相关阅读:
    Axure学习二:基础教程
    Axure 学习一:基础知识详解参考文档
    iOS 加载动态库报错问题
    iOS 9 之 Spotlight框架
    iOS 之 新功能、扩展
    mysql慢查询
    php curl多线程抓取网页
    php读取qqwry.dat ip地址定位文件的类
    php比较加赋值语句
    yaf在windows7下32位的安装教程
  • 原文地址:https://www.cnblogs.com/hj0711/p/9104002.html
Copyright © 2011-2022 走看看