Yoo趣儿

Yoo趣儿 › 探索分享 › 问与答 › 前端关于uniapp渲染pdf的疑问

前端关于uniapp渲染pdf的疑问

查看 43|回复 2
作者：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的时候uniapp报错：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'width')
[i]
已知是由下面这行代码引发的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  {
        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');
        });
      });
    }
  }
}
  
   
  
试试看
awdxszz
OP
  

[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
返回列表
您需要登录后才可以回帖 登录 | 立即注册

AD1

热门主题

热门板块

问与答分享发现分享创造奇思妙想分享邀请码商业推广优惠信息PythonPHPJavaJavaScriptNode.jsGo语言C++HTML

公告

标签|小黑屋|Yoo趣儿

GMT+8, 2024-11-29 03:03 , Processed in 0.132195 second(s), 13 queries , Gzip On, MemCached On.

Powered by Discuz! X3.2

The happiest thing in the world is to strive for an ideal.

返回顶部