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");
  }
相关推荐
dy171726 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
float_六七1 小时前
IntelliJ IDEA双击Ctrl的妙用
java·ide·intellij-idea
能摆一天是一天2 小时前
JAVA stream().flatMap()
java·windows
颜如玉3 小时前
🤲🏻🤲🏻🤲🏻临时重定向一定要能重定向🤲🏻🤲🏻🤲🏻
java·http·源码
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
星空寻流年5 小时前
设计模式第一章(建造者模式)
java·设计模式·建造者模式
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
gb42152875 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python