前端预览与下载PDF小结

项目中经常会遇到pdf的下载和预览的功能，那么我们该如何实现呢？

 

前提1：后台返回的是文件地址（非文件流）

下载：

<a href="/1.pdf" target="_blank" download>下载</a>

加上download即可。

预览：

<a href="/1.pdf" target="_blank">下载</a>

预览需要去掉download属性。

前提2：后台返回文件流地址

下载：

方法1：（注意此处不能加download）

<a href="http://test.pdf">下载</a>  

<a
            :href="
              SYS_URL +
                '/sa/panorama/downExcel?templateId=' +
                record.templateId +
                '&templateName=' +
                record.templateName +
                ''
            "
            ><a-button> 下载模版 </a-button></a
   >

直接默认就可以下载，其实也就是相当于用a标签来进行get请求，地址就是直接能够获取文件流的地址，地址可以传参，也可以不传参，根据实际接口要求来定。

 

方法2：

利用get请求，并且 responseType: "blob", 设置返回的请求是blob类型，来请求获取具体的文件流，然后经过处理后可以下载文件。

axios({
        url: `/admin/file/getFileByName?fileName=${fileName}`,
        method: "get",
        responseType: "blob",
      }).then((response) => {
        // 处理返回的文件流
        const blob = response.data;
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = '文件名称';
        document.body.appendChild(link);
        link.click();
        window.setTimeout(function () {
          URL.revokeObjectURL(blob);
          document.body.removeChild(link);
        }, 0);
 });

 

预览：

需要插件支持。如果pdf.js  或者  vue-pdf 等插件。

 

小结：不论后台返回的是文件或者文件流，其实对于下载来说都是好处理的。而对于如果是文件流来说，想在谷歌浏览器预览，则还需要额外的插件，才能预览。