记使用pdf.js过程遇到的坑

最近项目中需要用到js库来渲染pdf文件,调研后发现无论是reach-pdf.js或者是svelte-pdf.js都是在pdf.js基础上做了些许精简,反而功能还不如原始的pdf.js来得全面。但是原始的库几乎没有像样的代码示例,而能搜索到的大多数代码不少都是十几年前的了,在这个过程中踩了不少坑,做个记录,希望对看到的人有所帮助。

使用npm安装pdfjs-dist库(也可以直接下载源码并引入)

npm install pdfjs-dist

导入库

// 网上很多代码都是import xxx from 'pdfjs-dist';
// 而xxx一般都是过期或者不存在的,直接把所有导出为pdfjslib即可
import * as pdfjslib from 'pdfjs-dist';
// 注意需要设置这个参数
pdfjslib.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js';

单页渲染,多页渲染在下面代码基础上直接添加一个循环即可

let src = 'xxx.pdf';
let pageNum = 1;
let scale_ratio = 1.5;

async function renderPage() {
    const pdf = await pdfjsLib.getDocument(src).promise;
    const page = await pdf.getPage(pageNum);
    const viewport = page.getViewport({ scale: scale_ratio });

    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    await page.render(renderContext);

  }

注意渲染完的pdf只有图片形式,使用开发者工具看网页的结构只有canvas组件,想要实现文字的选择和复制还需要在上面渲染一层文字层。

// 需要引入样式文件,不然文字不会悬浮在cavas组件上
import 'pdfjs-dist/web/pdf_viewer.css';

async function renderFullPage(){
        const pdf = await pdfjsLib.getDocument(src).promise;

        const pdfContainer = document.createElement('div');
        pdfContainer.style.setProperty('--scale-factor', scale_ratio);

        for (let i=1; i<=pdf.numPages; i++){
            const pageNumber = i;
            const page = await pdf.getPage(pageNumber);

            const viewport = page.getViewport({scale: scale_ratio});

            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');

            canvas.height = viewport.height ;
            canvas.width = viewport.width ;
            
            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
        
            await page.render(renderContext);

            // canvasWrapper 可加可不加
            const canvasWrapper = document.createElement('div');
            canvasWrapper.className = 'canvasWrapper';
            canvasWrapper.appendChild(canvas);

            const textContent = await page.getTextContent();
            const textLayerDiv = document.createElement('div');
            // 类名严格为:textLayer
            textLayerDiv.className = `textLayer`;

            pdfjsLib.renderTextLayer({
                textContentSource: textContent,
                container: textLayerDiv,
                viewport: viewport,
                textDivs: []
            });
            
            const pageDiv = document.createElement('div');
            pageDiv.className = 'page';
            // 需要设置 position: relative
            // 否则全部文字可能都挤在第一页
            pageDiv.style = "position: relative; margin-bottom:10px";

            pageDiv.appendChild(canvasWrapper);
            pageDiv.appendChild(textLayerDiv);
            
            pdfContainer.appendChild(pageDiv);
            
        }

    }

简单来说就是在渲染完canvas代码之后,再渲染出文字层。有几个注意点:

  1. 需要在开头引入样式表,不然文字层会实际显示在页面中,不会悬浮不会透明;
  2. 需要在外面的组件中设置参数–scale-factor,用于保证图片和文字的位置对应,否则调整了scale_ratio后图片尺寸改变,但是文字层的大小还是不变;
  3. 文字层的类名需要严格设置为textLayer,从开头引入的样式表中可以看到;
  4. 包含canvas和文字层的父组件需要设置style为position: relative,否则多页的文字都会渲染到第一页中。
  • 9
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django 是一个常用的 Python Web 框架,而 pdf.js 是一个 JavaScript 库,用于在 Web 页面中渲染和交互式展示 PDF 文档。想要在 Django 中使用 pdf.js,需要进行以下步骤。 首先,我们需要在 Django 的项目中安装 pdf.js。可以通过下载 pdf.js 的代码,然后将其作为静态文件存放在 Django 项目的静态文件夹中,或者直接使用第三方库安装。 接下来,在 Django 的视图函数中,我们可以获取到需要展示的 PDF 文件的路径或者二进制数据。可以通过请求参数、数据库查询或其他方式来获取。 然后,在视图函数中,我们可以将获取到的 PDF 文件路径或者二进制数据传入到模板中,在模板中使用 pdf.js 提供的 JavaScript 函数进行渲染和展示。可以通过创建一个 HTML 页面,使用 pdf.js 提供的 `<canvas>` 标签来渲染 PDF 内容,然后使用 JavaScript 调用 pdf.js 的函数来加载和显示 PDF 文件。 在模板中,可以使用 Django 的模板语法将 PDF 文件的路径或者二进制数据传递给 JavaScript 函数。可以通过定义一个 JavaScript 函数来接收参数,然后在函数中调用 pdf.js 的函数进行 PDF 文件的加载和展示。 最后,在 Django 的路由配置中,需要定义一个 URL 用于访问对应的视图函数。可以通过配置一个路由规则,将 URL 映射到对应的视图函数上,这样当用户访问该 URL 时,会触发对应的视图函数,进而渲染并展示 PDF 文件。 总结起来,想要在 Django 中使用 pdf.js,首先需要安装 pdf.js,并将其作为静态文件存放在项目中。然后,在视图函数中获取到 PDF 文件的路径或者二进制数据,并传递给模板。在模板中使用 pdf.js 提供的 JavaScript 函数进行渲染和展示。最后,在路由配置中定义 URL 映射到对应的视图函数上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值