a标签预览PDF文件?

1,709 阅读1分钟

众所周知,a标签定义一个超链接,用于从一个页面链接到另一个页面,常用属性有href和target。此外,配合download属性可以做到文件的下载。

背景

然而,近日在业务中有一个PDF预览的功能,从一开始的找轮子、下方案,最终却采用了a标签进行预览。 该pdf位于oss文件存储服务器上。

过程

1、找轮子

起先,自然是寻找轮子的过程,最终选择了vue-pdf插件。但是,由于是开发环境,在插件api解析文件时报了跨域问题,如图:

1659751485723(1).png 设置了代理之后,可以正常的解析。

2、a标签预览pdf

参考了之前的预览,发现只是一个a标签就实现了。替换上去之后,结果是直接下载了当前pdf。通过比对href路径,发现之前的url多了response-content-type的入参。这是为什么呢? 关于a标签:

image.png oss工作台支持设置和批量response-content-type、Content-Disposition的值。

总结

a标签配合content-type可以在浏览器中轻松实现pdf的预览。