0

I have created a page that uses pdfjs with turnjs to achieve a flip book effect.The idea is to draw the pdf file to the canvas, and then use turnjs to flip the canvas to achieve the effect of turning the page.It works successfully on pc, but when opened on android or ios, the pdf is not rendered in its entirety, only part of the pdf page is displayed.

Here is how the page looks when running in the pc enter image description here

Here's how the page looks when running in ios**(Wrong)** enter image description here

I've tried to change the version of pdfjs, I've used version 2.4.456 with the latest version etc but they still don't work.The pdf page is still not fully rendered.

I want the pdf pages to be fully rendered on IOS/Android

Here is my code about using 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);
      });
    }

Here is the turnjs code with an Loading mask layers:

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);
            });
        }
      }
    };
Rikkkum
  • 1
  • 1

0 Answers0