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

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

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

代码如下:

javascript 复制代码
<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");
  }
相关推荐
一只小青团1 小时前
Python之面向对象和类
java·开发语言
qq_529835352 小时前
ThreadLocal内存泄漏 强引用vs弱引用
java·开发语言·jvm
落笔画忧愁e2 小时前
扣子Coze飞书多维表插件添加数据记录
java·服务器·飞书
LuciferHuang3 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing3 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20153 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言4 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手4 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
秋千码途4 小时前
小架构step系列08:logback.xml的配置
xml·java·logback
飞翔的佩奇4 小时前
Java项目:基于SSM框架实现的旅游协会管理系统【ssm+B/S架构+源码+数据库+毕业论文】
java·数据库·mysql·毕业设计·ssm·旅游·jsp