• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

前端预览与下载PDF小结

开发技术 开发技术 5小时前 2次浏览

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

 

前提1:后台返回的是文件地址(非文件流)

下载:

<a href="/1.pdf" target="_blank" download>下载</a>
加上download即可。

预览:

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

预览需要去掉download属性。

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

下载:

方法1:

<a href="http://test.pdf">下载</a>
直接默认就可以下载。
 
方法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);
 });

 

预览:

需要插件支持。

 前提3:后台直接返回了文件流


程序员灯塔
转载请注明原文链接:前端预览与下载PDF小结
喜欢 (0)