纯前端实现将pdf转为图片(插件pdfjs)
需求来源
预览简历功能在移动端,由于用了一层iframe把这个功能嵌套在了app端,再用一个iframe来预览,只有ios能看到,安卓就不支持,查了很多资料和插件,原理基本上都是用iframe实现的。最终转换思路,将pdf下载转为图片然后绘制到canvans中也是一样的效果。


实现步骤
先安装pdfjs插件,插件开源免费
官网:
https://github.com/mozilla/pdf.js
在vue或react项目中使用
https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website
npm install pdfjs-dist --save

:

上面几步完成后就完成80%了,剩下的就是把图片绘制到canvans了
这里我直接贴源码了,注意一点,官方的示例中没有import 'pdfjs-dist/build/pdf.worker.mjs'; 这一段导入,会有一个报错

gihub上有解释
https://github.com/mozilla/pdf.js/issues/10478

<template><div ref="showpdfRef"></div>
</template><script setup>
import { ref } from 'vue';
import { getDocument } from 'pdfjs-dist/legacy/build/pdf.mjs';
import 'pdfjs-dist/build/pdf.worker.mjs';const showpdfRef = ref(null);const pdfPath ='xxxxxxxx'const loadingTask = getDocument(pdfPath);
loadingTask.promise.then(async (pdf) => {const canvas = document.createElement('canvas');const context = canvas.getContext('2d');// 循环遍历每一页pdf,将其转成图片for (let i = 1; i <= pdf._pdfInfo.numPages; i++) {// 获取pdf页const page = await pdf.getPage(i);// 获取页的尺寸const viewport = page.getViewport({ scale: 1 });// 设置canvas的尺寸canvas.width = viewport.width;canvas.height = viewport.height;// 将pdf页渲染到canvas上await page.render({ canvasContext: context, viewport: viewport }).promise;// 将canvas转成图片,并添加到页面上const img = document.createElement('img');img.src = canvas.toDataURL('image/png');showpdfRef.value.appendChild(img);}}).then(function () {console.log('# End of Document');},function (err) {console.error('Error: ' + err);},);
</script><style scoped></style>
最终效果:

问题
跨域


我直接放入设置了跨域的链接到url是可以直接得到pdf的,但是目前这个跨域问题,后台说是有设置跨域,但是我请求有跨域,我在前端配置了跨域也还是不行。多番尝试后这个问题还是没有解决。由于时间紧迫,所以采用备用方案:后台在接口返回了pdf的base64格式,pdfjs官方案例中说需要将base64转为二进制数据就可以加载。
https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld64.html

相关文章:
纯前端实现将pdf转为图片(插件pdfjs)
需求来源 预览简历功能在移动端,由于用了一层iframe把这个功能嵌套在了app端,再用一个iframe来预览,只有ios能看到,安卓就不支持,查了很多资料和插件,原理基本上都是用iframe实现的。最终转换思路…...
【IT人物系列】之MySQL创始人
前言 当今世界有无数的人构成,其中有些人做了一些改变世界的事情,比如:乔布斯缔造了Apple帝国,詹姆斯高斯林创造了Java语言等。正是这些优秀的人做的这些优秀的事情,让这个世界更加美好。因此他们值得铭记。 从今天…...
在Typora中实现自动编号
文章目录 在Typora中实现自动编号1. 引言2. 准备工作3. 自动编号的实现3.1 文章大纲自动编号3.2 主题目录(TOC)自动编号3.3 文章内容自动编号3.4 完整代码 4. 应用自定义CSS5. 结论 在Typora中实现自动编号 1. 引言 Typora是一款非常流行的Markdown编辑…...
Single Shot MultiBox Detector(SSD)
文章目录 摘要Abstract1. 引言2. 框架2.1 网络结构2.2 损失函数2.3 训练细节 3. 创新点和不足3.1 创新点3.2 不足 参考总结 摘要 与Faster R-CNN相比,SSD是一个真正的单阶段多目标检测模型,同时也是一个全卷积网络,不仅检测准确率高ÿ…...
kafka生产者专题(原理+拦截器+序列化+分区+数据可靠+数据去重+事务)
目录 生产者发送数据原理参数说明代码示例(同步发送数据)代码示例(异步) 异步和同步的区别同步发送定义与流程特点 异步发送定义与流程特点 异步回调描述代码示例 拦截器描述代码示例 消息序列化描述代码示例(自定义序…...
【React+TypeScript+DeepSeek】穿越时空对话机
引言 在这个数字化的时代,历史学习常常给人一种距离感。教科书中的历史人物似乎永远停留在文字里,我们无法真正理解他们的思想和智慧。如何让这些伟大的历史人物"活"起来?如何让历史学习变得生动有趣?带着这些思考&…...
公共数据授权运营系统建设手册(附下载)
在全球范围内,许多国家和地区已经开始探索公共数据授权运营的路径和模式。通过建立公共数据平台,推动数据的开放共享,促进数据的创新应用,不仅能够提高政府决策的科学性和公共服务的效率,还能够激发市场活力࿰…...
基于HTML和CSS的旅游小程序
一、技术基础 HTML(HyperText Markup Language):超文本标记语言,用于定义网页的内容和结构。在旅游小程序中,HTML用于搭建页面的基本框架,包括标题、段落、图片、链接等元素,以及用于交互的表单…...
maven之插件调试
当使用maven进行项目管理的时候,可能会碰到一些疑难问题。网上资料很少,可能会想着直接调试定位问题。这里以maven-compiler-plugin为例: (1)准备maven-compiler-plugin源码 进入maven 官网-》Maven Plugins-》找到对…...
SQL Sever 数据库损坏,只有.mdf文件,如何恢复?
SQL Sever 数据库损坏,只有.mdf文件,如何恢复 在SQL Server 2008中,如果只有MDF文件而没有LDF文件,附加数据库的过程会稍微复杂一些。以下是几种可能的方法 一、使用紧急模式重建日志文件 1、新建一个同名的数据库。 2、停止SQ…...
【AWS SDK PHP】This operation requests `sigv4a` auth schemes 问题处理
使用AWS SDK碰到的错误,其实很简单,要装个扩展库 保持如下 Fatal error: Uncaught Aws\Auth\Exception\UnresolvedAuthSchemeException: This operation requests sigv4a auth schemes, but the client currently supports sigv4, none, bearer, sigv4-…...
primevue的<Menu>组件
1.使用场景 2.代码 1.给你的menu组件起个引用名 2.<Menu>组件需要一个MenuItem[] 3.你要知道MenuItem[ ]的特殊的数据格式,就像TreeNode[ ]一样,数据格式不对是不渲染的。。。。 常用的属性就这几种,js语言和java不一样,J…...
利用Deeplearning4j进行 图像识别
目录 图像识别简介 神经网络 感知器 前馈神经网络 自动编码器 受限玻尔兹曼机 深度卷积网络 理解图像内容以及图像含义方面,计算机遇到了很大困难。本章先介绍计算机理解图像教育方面 遇到的难题,接着重点讲解一个基于深度学习的解决方法。我们会…...
练习题:37
目录 Python题目 题目 题目分析 套接字概念剖析 通信原理分析 服务器 - 客户端连接建立过程: 基于套接字通信的底层机制: 代码实现 基于 TCP 的简单服务器 - 客户端通信示例 服务器端代码(tcp_server.py) 客户端代码&a…...
Unity热更文件比较工具类
打包出来的热更文件,如果每次都要全部上传到CDN文件服务器,不进耗费时间长,还浪费流量。 所以让AI写了个简单的文件比较工具类,然后修改了一下可用。记录一下。 路径可自行更改。校验算法这里使用的是MD5,如果使用SH…...
【hustoj注意事项】函数返回值问题
原文 https://lg.h-fmc.cn/index.php/BC/27.html 问题回顾 此题目选自HFMC_OJ:4312: 简单递归操作 hustoj测试 此问题错误的代码是 #include<bits/stdc.h> using namespace std; int a[10000];int n; int b[10000]{0}; int pailie(int deep) {int i; for(…...
实现一个通用的树形结构构建工具
文章目录 1. 前言2. 树结构3. 具体实现逻辑3.1 TreeNode3.2 TreeUtils3.3 例子 4. 小结 1. 前言 树结构的生成在项目中应该都比较常见,比如部门结构树的生成,目录结构树的生成,但是大家有没有想过,如果在一个项目中有多个树结构&…...
数势科技:解锁数据分析 Agent 的智能密码(14/30)
一、数势科技引领数据分析变革 在当今数字化浪潮中,数据已然成为企业的核心资产,而数据分析则是挖掘这一资产价值的关键钥匙。数势科技,作为数据智能领域的领军者,以其前沿的技术与创新的产品,为企业开启了高效数据分析…...
机器学习之过采样和下采样调整不均衡样本的逻辑回归模型
过采样和下采样调整不均衡样本的逻辑回归模型 目录 过采样和下采样调整不均衡样本的逻辑回归模型1 过采样1.1 样本不均衡1.2 概念1.3 图片理解1.4 SMOTE算法1.5 算法导入1.6 函数及格式1.7 样本类别可视化理解 2 下采样2.1 概念2.2 图片理解2.3 数据处理理解2.4 样本类别可视化…...
解决 ssh connect to host github.com port 22 Connection timed out
一、问题描述 本地 pull/push 推送代码到 github 项目报 22 端口连接超时,测试连接也是 22 端口连接超时 ssh 密钥没问题、也开了 Watt Toolkit 网络是通的,因此可以强制将端口切换为 443 二、解决方案 1、测试连接 ssh -T gitgithub.com意味着无法通…...
【入门C++语法】第11章 函数和变量作用域
第11章 函数和变量作用域 一、 函数 函数是C++中"封装一段特定功能"的代码块,能让程序结构更清晰、代码可重复使用。比如计算两数之和、判断数字是否为质数等功能,都可封装成函数。 函数的基本结构 返回值类型 函数名(参数列表) {// 函数体:实现功能的代码功能逻…...
AI Agent行动规划算法:动态环境下的最优决策生成
AI Agent行动规划算法:动态环境下的最优决策生成 1. 引言 在人工智能技术飞速发展的今天,AI Agent(智能体)已经成为了连接理论与实践的关键桥梁。从自动驾驶汽车到智能客服机器人,从游戏AI到工业自动化控制,AI Agent正在以前所未有的方式改变着我们的生活和工作方式。然…...
Unity项目适配谷歌AAB+PAD:从强制迁移到高效部署的实战解析
1. 谷歌商店政策变迁:从APK到AAB的必然之路 记得2018年我第一次在谷歌商店发布Unity游戏时,用的还是传统的APKOBB模式。当时为了把200MB的游戏塞进100MB的限制里,不得不把核心资源都放到OBB文件中。没想到三年后,谷歌直接宣布全面…...
SystemVerilog里用disable fork,为啥总把隔壁进程也“误杀”了?
SystemVerilog中disable fork的"误杀"陷阱与精准控制策略 在芯片验证和FPGA开发领域,SystemVerilog的并发进程管理是构建高效测试平台的核心技能之一。许多工程师在使用disable fork时都遭遇过这样的困境:明明只想终止某个特定分支的进程&…...
别再只会mvn package了!Spring Boot打包时spring-boot-maven-plugin到底干了啥?(附结构对比图)
深入解析Spring Boot打包机制:从mvn package到可执行FatJar的蜕变之路 每次在终端输入mvn package后,那个带着.jar后缀的文件究竟经历了怎样的"魔法改造"?作为Java开发者,我们可能每天都在重复这个动作,却很…...
定时任务调度
定时任务调度:自动化管理的智慧引擎 在现代信息化系统中,定时任务调度是确保业务高效运行的核心技术之一。无论是每天凌晨的数据备份,还是每周的报表生成,亦或是电商平台的秒杀活动预热,都离不开定时任务的精准调度。…...
PCIe 3.0信号完整性深度优化:除了100欧姆差分阻抗,这些细节才是性能关键
PCIe 3.0信号完整性深度优化:除了100欧姆差分阻抗,这些细节才是性能关键 在高速数字电路设计中,PCIe 3.0接口的信号完整性优化一直是硬件工程师面临的挑战。虽然大多数工程师都熟悉100欧姆差分阻抗的基本要求,但真正决定系统稳定性…...
保姆级教程:用Python+Simulink快速搭建一个简易的车辆侧翻预警仿真模型
PythonSimulink车辆侧翻预警仿真建模实战指南 从理论到实践:为什么选择仿真建模 在汽车安全工程领域,侧翻预警系统的开发一直是个既关键又具挑战性的课题。传统纯理论分析往往难以直观展示算法效果,而实车测试成本高、风险大。这正是仿真技术…...
从北邮网安复试笔记看考研面试:如何用一个月时间系统梳理计算机核心八股文?
计算机考研复试30天冲刺指南:从知识框架构建到面试话术设计 复试准备的核心逻辑与认知重构 考研复试本质上是一场多维能力评估,尤其在计算机/网络安全领域,考官关注的不仅是知识储备量,更是知识结构化能力与工程思维。传统"八…...
WindowResizer终极指南:快速掌握Windows窗口强制调整技巧
WindowResizer终极指南:快速掌握Windows窗口强制调整技巧 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 还在为无法调整某些软件窗口大小而烦恼吗?WindowR…...
