使用 PDFjs 页面在 IOS/Android 无法完全呈现

Question

我创建了一个页面，使用pdfjs配合turnjs实现了翻书的效果。思路是将pdf文件绘制到画布上，然后使用turnjs翻转画布，实现翻页的效果。可以在pc上成功，但是在android或ios上打开时，pdf没有完整呈现，只显示部分pdf页面。

这是在电脑上运行时页面的样子

这是在 ios 中运行时页面的样子**（错误）**

我试过更改 pdfjs 的版本，我使用了 2.4.456 版和最新版本等，但它们仍然不起作用。pdf 页面仍然没有完全呈现。

我希望 pdf 页面在 IOS/Android 上完全呈现

这是我关于使用 pdfjs 的代码：

 function setcanvas(i, pdf, id) {
      pdf.getPage(i).then(function (page) {
        var viewport = page.getViewport({ scale: scale });
        var canvas = document.getElementById(id);
        var context = canvas.getContext("2d");
        page111 = page;
        //Recalculate the scaling according to the standard based on the width and height of each image
        var newScale = 900 / viewport.height;
        var newViewport = page.getViewport({ scale: newScale });
        var outputScale = window.devicePixelRatio;
        canvas.width = Math.floor(newViewport.width * outputScale);
        canvas.height = Math.floor(newViewport.height * outputScale);
        canvas.style.width = "100%";
        canvas.style.height = "100%";
        var transform =
          outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
        var renderContext = {
          canvasContext: context,
          transform: transform,
          viewport: newViewport,
        };
        page.render(renderContext);
      });
    }

这是带有加载遮罩层的 turnjs 代码：

loadApp = async () => {
      // 获取当前页面的viewport，并指定缩放比例为scale
      var viewport = page111.getViewport({ scale: scale });
      // 如果是移动设备且存在id为"flipbook"的元素，则执行以下代码块
      if (isMobile() && !!$("#flipbook")) {
        $("#flipbook").turn({
          width: viewport.width, // 设置翻页书的宽度为viewport宽度
          height: viewport.height, // 设置翻页书的高度为viewport高度
          elevation: 50, // 翻转时抬升程度，单位像素，默认值是50px
          display: "single", // 显示模式：单页或双页（double）
          autoCenter: true, // 自动居中显示翻页书，默认值true
          duration: 1000, // 翻转一页需要时间，单位毫秒，默认值1000ms
          gradients: true, // 是否启用渐变背景色效果，默认值false
          disable: true, // 禁用鼠标拖拽功能，默认值false
        });
        const response = await fetch(pdfurl); // 发送GET请求获取pdf文件数据流
        const arrayBuffer = await response.arrayBuffer(); //
        const pdfData = new Uint8Array(arrayBuffer);
        await pdfjsLib
          .getDocument(pdfData)
          .promise.then(function (pdf) {
            // 使用pdf.js库解析PDF文档并返回Promise对象，在解析完成后隐藏遮罩层。
            $("#overlay").hide();
          })
          .catch(function (error) {
            console.log("Error loading PDF:" + error);
          });
      } else {
        // 如果不是移动设备，则执行以下代码块
        if (viewport.width > 800) {
          // 当视口宽大于800时，以单页模式展示翻页书
          $("#flipbook").turn({
            width: viewport.width,
            height: viewport.height,
            elevation: 50,
            display: "single",
            autoCenter: true,
            duration: 1000,
            gradients: true,
            disable: false,
          });
          const response = await fetch(pdfurl);
          const arrayBuffer = await response.arrayBuffer();
          const pdfData = new Uint8Array(arrayBuffer);
          await pdfjsLib
            .getDocument(pdfData)
            .promise.then(function (pdf) {
              $("#overlay").hide();
            })
            .catch(function (error) {
              console.log("Error loading PDF:" + error);
            });
        } else {
          // 当视口宽小于等于800时，以双面模式展示翻页书
          $("#flipbook").turn({
            width: viewport.width * 2,
            height: viewport.height,
            elevation: 50,
            display: "double",
            autoCenter: true,
            duration: 1000,
            gradients: true,
            disable: false,
          });
          const response = await fetch(pdfurl);
          const arrayBuffer = await response.arrayBuffer();
          const pdfData = new Uint8Array(arrayBuffer);
          await pdfjsLib
            .getDocument(pdfData)
            .promise.then(function (pdf) {
              $("#overlay").hide();
            })
            .catch(function (error) {
              console.log("Error loading PDF:" + error);
            });
        }
      }
    };