Vue项目中预览本地pdf文件

3,051 阅读1分钟

在项目开发过程中,我们会遇到需要进行本地预览文件的需求

第一步:将需要下载的pdf文件放在项目的public文件里面

1635230774(1).png

第二步:然后在页面中写展示代码

  • 打开一个新的页面进行预览

    93f1f9003dcbfc2943b0a305b231005.png

  • 还可以使用iframe的方式进行展示 1635231444(1).png

第三步:文件地址引入(这里要使用绝对路径引入)

40a853f63f23dc9177daf1cd9736db6.png

注: 如果预览时发现页面标题和文件标题不正确,可以打开文件的属性对标题进行设置,然后保存并将新文件上传就可以了

注:这种方式是将需要预览的文件放在项目中,如果要预览的文件是随时改变的,可以将文件放在服务器上,我们直接拿服务器上文件的地址就可以了