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 分钟前
有了Trae 上下文doc功能 ,快速上手陌生组件,再也不用提oncall了
前端·数据可视化·trae
不爱说话郭德纲4 分钟前
Vue scoped都用过吧,它是怎么实现样式隔离的?React又是怎么实现的
前端·javascript·vue.js
pwzs7 分钟前
常见的 Spring Boot 注解汇总
java·spring boot·后端·spring
小凡敲代码12 分钟前
美团Java后端二面面经!
java·程序员·java面试·java面试题·java开发·java场景题·美团java后端
OpenTiny社区14 分钟前
直播预告|TinyVue 组件库高级用法:定制你的企业级UI体系
前端·vue.js·开源
David凉宸14 分钟前
一篇文带你使用vue完成一个完整后台
前端
我怎么能这么帅气14 分钟前
picocolors:终端输出美化的极简利器,快如闪电的ANSIColor库!
javascript·npm
嘻嘻嘻嘻嘻嘻ys15 分钟前
《Spring Boot 3.2 × Java 21虚拟线程:百万并发Web应用实战与性能飞跃》
前端·后端
_志哥_18 分钟前
前端项目离线打包方案
前端·webpack
顾青18 分钟前
在 Electron 中引入本地谷歌插件
前端·electron