众所周知,a标签定义一个超链接,用于从一个页面链接到另一个页面,常用属性有href和target。此外,配合download属性可以做到文件的下载。
背景
然而,近日在业务中有一个PDF预览的功能,从一开始的找轮子、下方案,最终却采用了a标签进行预览。 该pdf位于oss文件存储服务器上。
过程
1、找轮子
起先,自然是寻找轮子的过程,最终选择了vue-pdf插件。但是,由于是开发环境,在插件api解析文件时报了跨域问题,如图:
设置了代理之后,可以正常的解析。
2、a标签预览pdf
参考了之前的预览,发现只是一个a标签就实现了。替换上去之后,结果是直接下载了当前pdf。通过比对href路径,发现之前的url多了response-content-type的入参。这是为什么呢? 关于a标签:
oss工作台支持设置和批量response-content-type、Content-Disposition的值。
总结
a标签配合content-type可以在浏览器中轻松实现pdf的预览。