uni-app中pdf.js使用总结

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app中pdf.js使用总结

ps:文中图片显示的浏览效果不佳是因为PDF文件没有按照原始尺寸大小显示，最后一张图是按原始大小显示的。

由于最新有个功能需求为浏览文档，而其中一种文档格式就是PDF，怎么查看PDF文件呢？网上查了相关资料，经过综合考虑认为集成tbs或psdf.js是比较好的实现方式。tbs只支持Android，而且需要离线打包，暂时放下。在此先记录pdf.js的使用：

pdf.js地址:pdf.js

如何下载pdf.js,github里有详细的介绍，并且提供了一些使用demo。不过demo都是需要配合服务器，可能是因为开发者的本意是做PDF的在线浏览。而今天要记录的是在不使用自己的服务器的情况下，用HBuilder如何使用pdf.js。

总共有3种使用方式： 1.下载pdf.js到本地 将从GitHub下载好的pdf.js项目build目录下的generic目录及其目录下所有文件拷贝到自己的项目中

将目录名’generic’改为’pdfjs’（为何要改为psdjs，这和pdf.js这个js文件中的引用有关，看源码便知）,目录结构和所含文件如图所示。

使用如上代码并可浏览PDF文件了，其中viewer.html就是浏览界面（由demo提供），如要添加按back键返回功能，引入mui.js便可。界面也可以根据自己的需求进行修改。 优点：无网络环境下也可正常浏览本地文件，速度相对其他两种较快 缺点：插件体积有点大

2.使用mozilla部署在github pages上的Viewer

mui.openWindow({  
    url:'http://mozilla.github.io/pdf.js/web/viewer.html?PDF文件路径',  
    // 网络PDF文件url示例：'http://mozilla.github.io/pdf.js/web/viewer.html?http://cdn.mozilla.net/pdfjs/tracemonkey.pdf'  
    id: 'pdf1',  
    show: {  
        duration: 300  
    }  
})

使用如上代码并可浏览PDF文件了，其中viewer.html就是浏览界面（由demo提供），界面无法修改。 优点：无需下载插件，便可直接使用 缺点：无法浏览本地文件，需要网络，网络文件较大时加载慢，浏览界面无回退功能（用双webview可实现回退）、无法修改，会有跨域问题

3.自定义预览界面，pdf.js使用cdn的方式导入

mui.openWindow({  
    url: '自定义HTML路径?pdf路径',   
    // 本地PDF文件url示例：'_www/pdfjs/index.html?file:///storage/emulated/0/tbs.pdf'  
    // 网络PDF文件url示例：'_www/pdfjs/index.html?http://cdn.mozilla.net/pdfjs/tracemonkey.pdf'  
    id: 'pdf3',  
    show: {  
        duration: 300  
    }  
})

使用如上代码便可浏览PDF文件了 优点：无需下载插件，使用简单， 缺点：需要网络

4.把pdf.js部署到服务端 和第3种方式类似，区别在于需要自己去部署服务器，之后的使用方法一样。

问题1：在直接实现预览的时候遇到显示模糊的问题，通过增大scale系数解决

var viewport = page.getViewport(2.0);//设置为2.0

问题2：pdf内容显示不完整，通过设置cMapUrl和cMapPacked解决

PDFJS.cMapUrl = 'https://unpkg.com/pdfjs-dist@1.9.426/cmaps/';
PDFJS.cMapPacked = true;

实际大小显示效果（横屏）：

demo在附件


Harmonyos Next教程
1 回复

在uni-app中使用pdf.js来展示PDF文件是一个常见的需求。pdf.js是一个由Mozilla维护的开源JavaScript库，用于在Web浏览器中渲染PDF文件。下面是一个简要的总结以及如何在uni-app中集成和使用pdf.js的代码示例。

准备工作

  1. 下载pdf.js库：你可以从pdf.js的GitHub仓库下载最新的代码，或者使用npm/yarn进行安装（但在uni-app中，通常建议手动下载并引入，因为npm/yarn可能不支持所有平台）。

  2. 将pdf.js和pdf.worker.js放入项目：将下载后的pdf.js和pdf.worker.js文件放入你的uni-app项目的static目录下，确保它们可以通过静态资源路径访问。

代码实现

1. 引入pdf.js

在你的页面或组件中，引入pdf.js和pdf.worker.js：

// 引入pdf.js
import pdfjsLib from '@/static/pdf.js';

// 引入pdf.worker.js
pdfjsLib.GlobalWorkerOptions.workerSrc = '@/static/pdf.worker.js';

2. 渲染PDF文件

创建一个函数来加载并渲染PDF文件：

methods: {
  async loadPDF(url) {
    try {
      const loadingTask = pdfjsLib.getDocument(url);
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(1); // 加载第一页
      const viewport = page.getViewport({ scale: 1.5 }); // 设置缩放比例

      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
    } catch (error) {
      console.error('Error loading PDF:', error);
    }
  }
}

3. 在模板中创建canvas元素

在你的页面或组件的模板中，添加一个canvas元素，用于渲染PDF页面：

<template>
  <view>
    <canvas ref="pdfCanvas"></canvas>
    <button @click="loadPDF('path/to/your/pdf/file.pdf')">Load PDF</button>
  </view>
</template>

注意事项

  • 确保PDF文件的路径正确，并且文件可以被访问。
  • pdf.js渲染PDF时可能需要一些时间，特别是在文件较大或设备性能较低的情况下。
  • 根据需要调整canvas的大小和缩放比例。

通过上述步骤，你可以在uni-app中成功集成并使用pdf.js来展示PDF文件。如果需要展示多页PDF，可以在loadPDF函数中循环加载每一页，并在页面上添加分页控件。

回到顶部