下载pdf.js:

Getting Started

下载完成后,在项目的public文件下创建pdfjs文件夹,将解压后的web、build文件复制到pdfjs文件夹内。

添加iframe视图标签,src内按照只有url是动态的,其他可以照搬。

<iframe
    :width="800"
    style="height: 100%;"
    v-else="url"
    :src="`/pdfjs/web/viewer.html?file=${encodeURIComponent(url)}`"
  ></iframe>

从后台获取pdf文件流,将文件流转换成BlobPart类型(注:vue3要加类型),以pdf格式显示到iframe内。

到这里其实已经可以正常使用了,本地运行其实是没有问题的,但是部署到服务器后,出现报错:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

原因是viewer.mjs的原因,解析不出mjs文件脚本,这里直接将viewer.mjs的后缀改成了js文件,然后将viewer.html文件内的<script src="viewer.js" type="module"></script>也改成.js后缀,这样就可以正常运行了。

隐藏打印、下载按钮(其他按钮的代码都挨着,可以一个一个挨着试即可)。

打开viewer.html文件,搜索id="download"或id="print",然后再按钮上加隐藏属性。

隐藏黑色边框,搜索id="toolbarContainer"

为了更自然点,还可以将外边框设置成白色,搜索id="mainContainer"

GitHub 加速计划 / pd / pdf.js
6
0
下载
PDF Reader in JavaScript
最近提交(Master分支:5 个月前 )
ac579396 Implement helper functions for (un)selecting an editor in the integration tests 3 天前
895edafc This has multiple advantages: - it improves consistency between the various editor integration tests; - it makes the code easier to read/understand; - it reduces code duplication. 3 天前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐