vue2 点击按钮下载pdf文件至本地

最新推荐文章于 2024-04-29 11:41:35 发布

一路向北qaq

最新推荐文章于 2024-04-29 11:41:35 发布

阅读量670

点赞数 6

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_64310738/article/details/135724602

版权

//点击下载按钮
            <el-button
              size="mini"
              type="text"
              @click="download(scope.row)"
              :disabled="scope.row.approveOp =='1'?false:true"
              v-hasPermi="['system:dict:remove']"
              >下载</el-button
            >
 
//点击事件
 
download(e) {
      let batchNo = e.batchNo;
      loadVoucher(batchNo).then((res) => {
        // 获取当前页面的URL
        // let currentUrl = window.location.origin;
        let currentUrl='http://11.11.111.11:80800/lll-api'，//服务器地址
        let path = res.msg;
        const downloadUrl = currentUrl + path;
        //区别：
        //接口返回的是相对路径，需要拼接上服务器地址；方法二是直接打开pdf预览，方法一是下载到本地
        //方法一
        this.downloadFile(downloadUrl,batchNo);
 
 
        //方法二
        // // 下载完成后，移除<a>标签
        // document.body.removeChild(link);
        // window.location.href=downloadUrl
        // 创建a标签并设置href和download属性
        // const link = document.createElement('a');
        // link.href = downloadUrl;
        // link.download = 'file.pdf';
        // // 将a标签添加到页面中并模拟点击
        // document.body.appendChild(link);
        // link.click();
        // document.body.removeChild(link);
        console.log("下载接口返回地址", downloadUrl);
      });
    },
 
 downloadFile(url,name) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob'; // 设置响应类型为blob，以便处理二进制数据
 
      xhr.onload = function() {
        if (xhr.status === 200) {
          var blob = xhr.response;
          var link = document.createElement('a');
          link.style.display = 'none';
          link.href = window.URL.createObjectURL(blob);
          link.setAttribute('download', name+'.pdf');//文件名自更改
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      };
      xhr.send();
    },