关于使用pdfjs-dist预览pdf文件，手机端展示pdf会模糊问题

背景：在pc端正常展示的pdf，放在手机端预览时会模糊

pc端代码如下：使用getViewport方法，scale放大2倍，可以清晰的展示pdf

async loadPDF(url) {
  const loadingTask = pdfjsLib.getDocument({
    url,
    cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.0.279/cmaps/",
    cMapPacked: true
  });
  const pdf = await loadingTask.promise;
  const pdfContainer = this.$refs.scrollContainer;
  this.pdf = pdf;

  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
    const page = await pdf.getPage(pageNum);
    const viewport = page.getViewport({ scale: 2 });
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    canvas.style.display = "block";
    canvas.width = viewport.width;
    canvas.height = viewport.height;

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

    pdfContainer.appendChild(canvas);
  }
  this.pdfPageHeight = pdfContainer.childNodes[0].height;
  this.pdfPageWidth = pdfContainer.childNodes[0].width;
},

h5端代码：

async function loadPDF(url) {
    const loadingTask = pdfjsLib.getDocument({
      url,
      cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.0.279/cmaps/",
      cMapPacked: true
    })
    const pdf = await loadingTask.promise
    const pdfContainer = scrollContainer.value
    totalPageNums.value = pdf.numPages

    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
      const page = await pdf.getPage(pageNum)
      let dpr = window.devicePixelRatio || 1
      let viewport = page.getViewport({ scale: 0.67 })

      const canvas = document.createElement("canvas")
      canvas.classList.add("canvas-page")
      const context = canvas.getContext("2d") as CanvasRenderingContext2D
      canvas.setAttribute("style", `background-color: #fff; display: block;`)
      canvas.width = viewport.width * dpr
      canvas.height = viewport.height * dpr
      canvas.style.width = `${screen.availWidth}px`

      await page.render({
        canvasContext: context as Object,
        viewport,
        transform: [dpr, 0, 0, dpr, 0, 0]
      }).promise

      pdfContainer!.appendChild(canvas)
    }
    pdfHeight.value = (pdfContainer!.childNodes[0] as HTMLCanvasElement).height
    pdfWidth.value = (pdfContainer!.childNodes[0] as HTMLCanvasElement).width
  }

结论：先把pdf缩小成scale：0.67保证在移动端一屏可以完全展示下pdf，然后把画布的绘画区域根据手机的dpr放大，然后把显示区域设置成屏幕大小，最后在render方法设置transform属性，这样就能保证在手机端清晰的展示pdf。