移动端H5页面PDF操作及预览

最新推荐文章于 2025-10-23 01:02:32 发布

原创最新推荐文章于 2025-10-23 01:02:32 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#pdf

该文章介绍了如何在Node.js环境中利用pdfjs-dist库处理PDF文档，以适应移动端主流浏览器和企业微信低版本。首先，通过gitclone获取项目，然后全局安装gulp并配置项目。打包后的build文件夹包含处理PDF所需的内容。对于接口返回的PDF数据流，转换为blob对象并通过URL.createObjectURL创建链接。在低版本浏览器中，通过iframe加载以解决兼容性问题。另外，还提到可以使用npm包定制PDF展示页面，并通过canvas元素来渲染PDF。

环境：nodejs

适配：移动端主流浏览器支持企业微信低版本

插件：pdfjs-dist @2.6.347

方案一本地构建

拉取项目：

git clone https://github.com/mozilla/pdfjs-dist.git

全局安装gulp

npm install -g gulp-cli

安装项目依赖

npm install

预制打包

gulp generic

打包后复制build文件下的generic，里面有build和web两个文件文件

把generic复制到本地根目录下

把接口返回的PDF数据流转换为blob

 let href = window.URL.createObjectURL(fileBlob)
      let page = this.$router.resolve({
             path: '/path', //页面路由
             query: {
                 fileName: fileName,
                 url: href           //传递参数
             }
        })
    window.location.href = page.href