网站建设网络推广广告语,网站建设外包公司容易被客户投诉吗,加强网站硬件建设方案,中国wordpress变装PDF 显示
场景#xff1a; 其实直接显示 pdf 可以用 iframe 标签#xff0c;但产品觉得浏览器自带的 pdf 预览太丑了#xff0c;而且无法去除那些操作栏。
解决方案#xff1a;使用 pdf.js 进行显示
第一步#xff1a;引入 pdf.js
去官网下载稳定版的 pdf.js 文件 然后…PDF 显示
场景 其实直接显示 pdf 可以用 iframe 标签但产品觉得浏览器自带的 pdf 预览太丑了而且无法去除那些操作栏。
解决方案使用 pdf.js 进行显示
第一步引入 pdf.js
去官网下载稳定版的 pdf.js 文件 然后将下载好的文件放进项目的静态文件夹我用的是 vite 项目所以是 public 第二步在页面中引入 viewer.html
iframeclassiframe1:src/public/pdf/web/viewer.html?filexxxxxxxframeborder0width100%height100%
/iframefilte 是你的 pdf 的路径本地路径和 url 路径都是可以的
设置好之后就可以预览了
效果如下 遇到的问题
pdf 跨域
首先此插件跨域的话会报错需要注释掉部分代码
/pdf/web/viewer.js 注释掉之后就可以解决了
更改 pdf 样式
直接去修改 viewer.html 里面的代码就行了
