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

如果想实现将后端二进制转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");
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/763344.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

mac软件卸载后的残留文件删除 mac如何卸载应用程序

很多人都不知道&#xff0c;mac使用系统方式卸载后会有残留文件未被删除&#xff0c;久而久之就会占用大量的磁盘空间。今天小编就来教大家如何删除mac软件卸载后的残留文件&#xff0c;如果你想不留痕迹的删除&#xff0c;mac又该如何正确卸载应用程序&#xff0c;本文将一一为…

整合、速通 版本控制器-->Git 的实际应用

目录 版本控制器 -- Git1、Git 和 SVN 的区别2、Git 的卸载和安装2-1&#xff1a;Git 卸载1、先查下原本的Git版本2、删除环境变量3、控制面板卸载 Git 2-2&#xff1a;Git 下载安装1、官网下载2、详细安装步骤3、安装成功展示 3、Git 基础知识3-1&#xff1a;基本的 Linux 命令…

通俗易懂的chatgpg的原理简介

目录 一、深度学习与语言模型 二、ChatGPT训练三步走 三、情景学习与思维链 四、修改提示语优化结果 五、能力评估和注意问题 六.算法原理 简介&#xff1a; ChatGPT的人工智能原理主要基于深度学习技术&#xff0c;特别是大规模的预训练语言模型和Transformer结构。Cha…

SpringCloud_Eureka注册中心

概述 Eureka是SpringCloud的注册中心。 是一款基于REST的服务治理框架&#xff0c;用于实现微服务架构中的服务发现和负载均衡。 在Eureka体系中&#xff0c;有两种角色: 服务提供者和服务消费者。 服务提供者将自己注册到Eureka服务器&#xff0c;服务消费者从Eureka服务器中…

使用Qt制作一个简单的界面

1、创建工程 步骤一&#xff1a; 步骤二&#xff1a; 步骤三&#xff1a; 选择 build system&#xff0c;有qmake、CMake 和 Qbs 三个选项。 CMake 很常用&#xff0c;功能也很强大&#xff0c;许多知名的项目都是用它&#xff0c;比如 OpenCV 和 VTK&#xff0c;但它的语法繁…

【Android面试八股文】什么是ANR?如何分析和定位ANR?如何避免ANR?

文章目录 一、ANR概述二、触发ANR的主要场景三、Android四大组件中的潜在的ANR风险五、避免ANR的实践建议六、ANR的产生原因与出现的场景6.1 原因:6.2 出现场景:七、ANR的定位与分析7.1. ANR分析思路——traces7.2 ANR其他分析思路与相关日志7.2.1 分析logcat思路7.2.2 分析k…

Spring Cloud Circuit Breaker基础入门与服务熔断

官网地址&#xff1a;https://spring.io/projects/spring-cloud-circuitbreaker#overview 本文SpringCloud版本为&#xff1a; <spring.boot.version>3.1.7</spring.boot.version> <spring.cloud.version>2022.0.4</spring.cloud.version>【1】Circu…

易校网校园综合跑腿小程序源码修复运营版

简介&#xff1a; 易校网校园综合跑腿小程序源码修复运营版&#xff0c;带服务端客户端前端文档说明。 源码安装方法&#xff1a; 需要准备小程序服务号 服务器 备案域名 校园网跑腿小程序源码需要准备 1.小程序 2.服务器&#xff08;推荐配置2h4g3m&#xff09; 3.域名…

【Python实战因果推断】13_线性回归的不合理效果3

目录 Regression Theory Single Variable Linear Regression Multivariate Linear Regression Frisch-Waugh-Lovell Theorem and Orthogonalization Regression Theory 我不打算太深入地探讨线性回归是如何构建和估计的。不过&#xff0c;一点点理论知识将有助于解释线性回归…

更新!谷歌倾斜摄影OSGB数据V1.2版

谷歌倾斜摄影OSGB数据V1.2版终于来了&#xff01; 一个月前发布了谷歌倾斜摄影数据生成OSGB数据V1.0版&#xff0c;对谷歌倾斜摄影数据转换工具进行了重大更新&#xff0c;V1.1版主要解决了三个问题&#xff1a;1.支持Cesiumlab等数据处理软件&#xff0c;将OSGB数据转换成3DTi…

OFDM关键技术——PAPR降低技术

OFDM信号的峰均比问题 PAR问题由于不同子载波上N个正弦信号叠加引起&#xff0c;由于各个子载波的幅值和相位相互独立&#xff0c;当子载波数目较大时&#xff0c;由中心极限定理可知&#xff0c;同相分量的幅度服从高斯分布。 峰值功率&#xff1a;0.1033 平均功率&am…

网安小贴士(4)哈希函数

一、前言 哈希函数是密码学中的基础工具&#xff0c;哈希函数在密码学中扮演着至关重要的角色&#xff0c;广泛应用于确保数据的安全性和完整性。随着技术的发展&#xff0c;新的哈希算法和应用场景也在不断出现。 二、定义 哈希函数是一种数学函数&#xff0c;它接受一个输…

计算机I/O系统与外围设备详解:从基础概念到实际应用

计算机I/O系统与外围设备详解&#xff1a;从基础概念到实际应用 在计算机世界中&#xff0c;理解I/O系统和外围设备的基本概念对初学者来说至关重要。本文将详细介绍I/O系统的基础知识、I/O接口、计算机外围设备及其工作原理&#xff0c;帮助基础小白更好地理解这些概念。 I/O…

毫米波雷达深度学习技术-1.7训练一个神经网络

1.7 训练一个神经网络 对于训练神经网络&#xff0c;有两个步骤&#xff0c;即前向传递和误差反向传播。 1.7.1 前向传播和反向传播 在前向传递中&#xff0c;输入被馈送到模型并与权重向量相乘&#xff0c;并为每一层添加偏差以计算模型的输出。密集层或全连接层第l层的输入、…

中画幅巡检相机-SHARE 100M A10

【毫厘之间&#xff0c;洞见非凡】 ——SHARE 100M A10中画幅测量相机&#xff0c;巡检行业的新选择 在巡检行业&#xff0c;精准度是关键&#xff0c;深圳赛尔智控科技有限公司最新推出的SHARE 100M A10中画幅测量相机&#xff0c;基于先进的IMX461影像传感器&#xff0c;拥有…

prometheus 安装node_exporter, node_exporter 安装最新版 普罗米修思安装监控服务器client

1. 本文介绍两种安装方式&#xff0c;一种安装为service,使用systemctl start node_exporter管理&#xff0c;第二种为安装docker内 容器内使用。 1.1 安装到系统内&#xff1a; 1.1.1 github地址&#xff1a; Releases prometheus/node_exporter GitHub ​ 1.1.2 下载命…

解析Linux top 命令输出并生成动态图表

文章目录 0. 引言1. 原理2. 功能3. 程序架构流程图结构图 4. 数据解析模块5. 图表绘制模块6. 主程序入口7. 使用方法8. 总结9. 附录完整代码 0. 引言 在性能调优和系统监控中&#xff0c;top 命令是一种重要工具&#xff0c;提供了实时的系统状态信息&#xff0c;如 CPU 使用率…

PHP电商系统开发指南高级技巧

开发高级 php 电商系统所需的技巧包括&#xff1a;数据库优化&#xff1a;使用索引、规范化数据结构和缓存机制。性能优化&#xff1a;启用页面缓存、优化图像和使用 cdn。购物车管理&#xff1a;使用会话或数据库存储数据&#xff0c;实现实时更新和弃单恢复。支付集成&#x…

windows10如何打开开发者模式

按键盘上的win键或者点击屏幕左下角的开始图标&#xff0c;即可出现如下的界面 在打开的界面中找到设置按钮&#xff0c;点击设置按钮 进入windows设置界面后&#xff0c;找到‘更新和安全’的选项&#xff0c;随后点击进入 进去后在左侧的功能列表中找到‘开发者选…

Transformer模型原理细节解析

基本原理: Transformer 的核心概念是 自注意力机制(Self-Attention Mechanism),它允许模型在处理每个输入时“关注”输入序列的不同部分。这种机制让模型能够理解每个单词或符号与其他单词或符号之间的关系,而不是逐个地线性处理输入。 Transformer 主要由两个部分组成:…