Vue3使用PDFJS将后端查到的二进制数据转为图片

最新推荐文章于 2024-08-18 21:36:31 发布

小怪瘦79

最新推荐文章于 2024-08-18 21:36:31 发布

阅读量247

点赞数 2

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/weixin_71146793/article/details/140101510

版权

如果想实现将后端二进制转pdf请看我另一篇文章

VUE3中使用PDF.js实现二进制转PDF预览功能_pdfjs 二进制-CSDN博客
代码如下：

<template>
<img :src="imageUrl" style=" width: 267.3mm; max-height: 189mm" />
</template>

const imageUrl = ref();
imageUrl.value = await convertPdfPageToImageUrl(data);

async function convertPdfPageToImageUrl(pdfData) {
    GlobalWorkerOptions.workerSrc = "/public/static/pdf/build/pdf.worker.mjs";
    const loadingTask = await getDocument({ data: pdfData });
    const pdfDocument = await loadingTask.promise;
    const pageNumber = 1;
    const pdfPage = await pdfDocument.getPage(pageNumber);

    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");

    const viewport = pdfPage.getViewport({ scale: 1.0 });
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    await pdfPage.render({
      canvasContext: context!,
      viewport: viewport
    }).promise;
    return canvas.toDataURL("image/png");
  }