前端关于uniapp渲染pdf的疑问

awdxszz

已使用npm安装并引用了pdfjs-dist

[JavaScript] 纯文本查看 复制代码

import * as pdfjsLib from "pdfjs-dist";
Vue.use(pdfjsLib);

在组件中引用了pdf.worker.mjs

[JavaScript] 纯文本查看 复制代码

methods: {
    async loadPDF() {
      // 引入worker.js
      pdfjsLib.GlobalWorkerOptions.workerSrc =
        "../../static/pdfjs-dist/pdf.worker.mjs";

      const loadingTask = pdfjsLib.getDocument(
        "https://minio.yndth.tech/bilateral-trade-mall%2Fvoucher-file%2Fpdf%2F2d41d0d19cc993dda4fdc070d779ecbc.pdf"
      );
      try {
        const pdf = await loadingTask.promise;
        this.renderPDF(pdf);
      } catch (error) {
        console.error("Error loading PDF", error);
      }
    },
    async renderPDF(pdf) {
      const canvas = uni.createCanvasContext("pdf-canvas", this);
      for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
        const page = await pdf.getPage(pageNum);
        const viewport = page.getViewport({ scale: 1.5 });

        // 准备canvas
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        // 将PDF页面渲染到canvas
        await page.render({ canvasContext: canvas, viewport }).promise;

        // 绘制到canvas上
        canvas.draw();
      }
    },
  }

最后渲染PDF的时候uniapp报错：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'width')


已知是由下面这行代码引发的width和height没找到报错的（也就是pdf组件的render方法没有找到宽高导致的）

[JavaScript] 纯文本查看 复制代码

await page.render({ canvasContext: canvas, viewport }).promise;

花了1天的时间没有找到解决方法，求大佬帮帮忙，分不够随时可加

一块腹肌Leon

[JavaScript] 纯文本查看 复制代码

methods: {
  async loadPDF() {
    // 引入worker.js
    pdfjsLib.GlobalWorkerOptions.workerSrc = "../../static/pdfjs-dist/pdf.worker.mjs";

    const loadingTask = pdfjsLib.getDocument(
      "https://minio.yndth.tech/bilateral-trade-mall%2Fvoucher-file%2Fpdf%2F2d41d0d19cc993dda4fdc070d779ecbc.pdf"
    );
    try {
      const pdf = await loadingTask.promise;
      this.renderPDF(pdf);
    } catch (error) {
      console.error("Error loading PDF", error);
    }
  },
  async renderPDF(pdf) {
    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
      const page = await pdf.getPage(pageNum);
      const viewport = page.getViewport({ scale: 1.5 });

      // 使用UniApp的createSelectorQuery获取canvas节点
      const query = uni.createSelectorQuery().in(this);
      query.select('#pdf-canvas').fields({ node: true, size: true }).exec((res) => {
        const canvas = res[0].node;
        const canvasContext = canvas.getContext('2d');

        // 设置canvas宽高
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        // 将PDF页面渲染到canvas
        const renderContext = {
          canvasContext: canvasContext,
          viewport: viewport,
        };

        page.render(renderContext).promise.then(() => {
          console.log('Page rendered');
        });
      });
    }
  }
}
<template>
  <view>
    <canvas id="pdf-canvas" style="width: 100%; height: auto;"></canvas>
  </view>
</template>

试试看

awdxszz

[JavaScript] 纯文本查看 复制代码

const canvas = res[0].node;
        const canvasContext = canvas.getContext('2d');

res[0]只有with和height，没有node怎么办？
报错：TypeError: Cannot read properties of undefined (reading 'getContext')
也就是没有找到res[0].node

awdxszz

一块腹肌Leon 发表于 2024-7-8 14:44
[mw_shl_code=javascript,true]methods: {
  async loadPDF() {
    // 引入worker.js

我回复错了，你帮我看一下上一楼的描述嘛

一块腹肌Leon

你在下面 console.log(res) 试试看