文件预览/下载方式：通过二进制流（Blob）下载、或者通过文件Url下载

最新推荐文章于 2024-02-21 19:16:26 发布

陶甜也

最新推荐文章于 2024-02-21 19:16:26 发布

阅读量922

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/TTianYe/article/details/132292900

版权

一、通过二进制流（Blob）下载

1 、API请求时候带上类型

/**
 * 文件--下载
 * */
export function download(fphm) {
  return axios({
    url: "/ynpst/download-invoice?fphm=" + fphm,
    method: 'get',
    responseType: 'blob'
  })
}

2、文件预览和下载

    /**
     * 预览
     * */

    seeItem(fphm) {
    //请求预览API
      preview(fphm).then(res => {
        const blob = new Blob([res], {
          type: 'application/pdf;chartset=UTF-8'
        })
        let blobUrl = window.URL.createObjectURL(blob)
        window.open(blobUrl)
      })
    },
    /**
     * 下载--请求API
     * */
    dowload(fphm) {
      download(fphm).then(res => {
        this.downloadFn(res)
      })
    },
    /**
     * 下载---文件
     * */
    downloadFn(flow) {
      if (!flow) return
      const blob = new Blob([flow])
      const blobUrl = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.style.display = 'none'
      a.download = '发票.pdf' // 自定义下载的文件名
      a.href = blobUrl
      a.click()
    }

二、通过文件地址Url下载文件

1、预览

 window.open(fileUrl)
 或者使用 a 标签

2、下载

调用downLoad方法下载文件，以下是具体方法：
    //************************修改文件下载的名称*********start************************
    /**
     * 获取 blob
     * @param  {String} url 目标文件地址
     * @return {Promise}
     */
     function  getBlob(url) {
        return new Promise(resolve => {
            const xhr = new XMLHttpRequest();
            // 避免 200 from disk cache
            url = url + `?r=${Math.random()}`;
            xhr.open("GET", url, true);
            xhr.responseType = "blob";
            xhr.onload = () => {
              if (xhr.status === 200) {
                resolve(xhr.response);
              }
            };
            xhr.send();
          });
        }
    
        /**
         * 保存
         * @param  {Blob} blob
         * @param  {String} filename 想要保存的文件名称
         */
          function  saveAs(blob, filename) {
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, filename);
          } else {
            const anchor = document.createElement("a");
            const body = document.querySelector("body");
            anchor.href = window.URL.createObjectURL(blob);
            anchor.download = filename;
            console.log(filename, "filename");
            anchor.style.display = "none";
            body.appendChild(anchor);
            anchor.click();
            body.removeChild(anchor);
            window.URL.revokeObjectURL(anchor.href);
          }
        }
    
        /**
         * 下载
         * @param  {String} url 目标文件地址
         * @param  {String} newFilename 想要保存的文件名称
         */
        export async function download(url, newFilename) {
    //   console.log(url, newFilename,'jsjsjsjsjsj');      
          const blob = await getBlob(url);
          console.log(blob,'blob');
          
          saveAs(blob, newFilename);
        }
      
      //************************修改文件下载的名称*********end************************