Vue中将pdf文件转为图片

news2025/4/6 12:18:49

平时开发中,我们经常遇到的场景应该是调用后端接口返回给前端pdf格式的文件流,然后我们可以通过URL.createObjectURL的方式转为object url临时路径然后可以通过window.open的方式来打开一个新的浏览器页签来进行预览,效果如下图:

但有时候这样满足不了的需求,它不想这样预览,不想要那么多乱七八糟的东西,我只要PDF文件中的内容,然后在项目页面中类似个弹窗似的直接展示pdf文件的内容。

所以,这篇就来说一下,我们可以将pdf文件转为图片来进行展示。

1. 安装pdfjs-dist 

pnpm add pdfjs-dist@2.6.347

这里哈!网上搜了好多,全是报错的,一会儿必须那个版本,一会儿必须这个版本的,都是报错,后来发现报错的原因是因为在设置workerSrc的时候原因,网上大多数都是从pdfjs-dist库里面引入的,然后进行设置的,都是报错。如下所示:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

day39——输入操作:多值输入

数组输入&#xff1a; int main() {//***** 1、多值输入&#xff08;C&#xff09;/*输入&#xff1a;3 --> 3个值5 4 9*/int n;cin >> n; //输入个数const int MAX_SIZE 0xFFFF;//限定最大个数int a[MAX_SIZE];for (int i 0; i < n; i) {//用 n 作控制输入…

微软的 Copilot 现在可以浏览网页并为您执行操作

在庆祝其 50 岁生日之际&#xff0c;微软正在向其人工智能驱动的 Copilot 聊天机器人传授一些新技巧。 从 BASIC 到 AI&#xff0c;改变世界的公司&#xff1a;微软 微软表示&#xff0c;Copilot 现在可以在“大多数网站”上采取行动&#xff0c;使其能够预订门票、预订餐厅等…

深入理解Python元组:从基础到高级应用

1. 元组基础认知 1.1 什么是元组 不可变序列&#xff1a;元组(tuple)是Python内置的不可变序列类型异构容器&#xff1a;可以存储不同类型的数据&#xff08;与列表类似&#xff09;语法特征&#xff1a;使用圆括号()定义&#xff0c;元素间用逗号分隔 # 基本示例 t1 (1, 2…

【零基础入门unity游戏开发——动画篇】unity旧动画系统Animation组件的使用

考虑到每个人基础可能不一样&#xff0c;且并不是所有人都有同时做2D、3D开发的需求&#xff0c;所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】&#xff1a;主要讲解C#的基础语法&#xff0c;包括变量、数据类型、运算符、…

Python+AI提示词用贝叶斯样条回归拟合BSF方法分析樱花花期数据模型构建迹图、森林图可视化

原文链接&#xff1a;https://tecdat.cn/?p41308 在数据科学的领域中&#xff0c;我们常常会遇到需要处理复杂关系的数据。在众多的数据分析方法中&#xff0c;样条拟合是一种非常有效的处理数据非线性关系的手段。本专题合集围绕如何使用PyMC软件&#xff0c;对樱花花期数据进…

实战打靶集锦-38-inclusiveness

文章目录 1. 主机发现2. 端口扫描&服务枚举3. 服务探查4.系统提权 靶机地址&#xff1a;https://download.vulnhub.com/inclusiveness/Inclusiveness.ova 1. 主机发现 目前只知道目标靶机在192.168.56.xx网段&#xff0c;通过如下的命令&#xff0c;看看这个网段上在线的主…

Unhandled exception: org.apache.poi.openxml4j.exceptions.InvalidFormatException

代码在main方法里面没有报错&#xff0c;在Controller里面就报错了。 原来Controller类里面少了行代码 import org.apache.poi.openxml4j.exceptions.InvalidFormatException; 加上去就解决了。

03.unity开发资源 获取

03.unity开发资源 获取 提示&#xff1a;帮帮志会陆续更新非常多的IT技术知识&#xff0c;希望分享的内容对您有用。本章分享的是Python基础语法。前后每一小节的内容是存在的有&#xff1a;学习and理解的关联性&#xff0c;希望对您有用~ unity简介-unity基础 第三节 &#xf…

OpenCV界面编程

《OpenCV计算机视觉开发实践&#xff1a;基于Python&#xff08;人工智能技术丛书&#xff09;》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 OpenCV的Python开发环境搭建(Windows)-CSDN博客 OpenCV也支持有限的界面编程&#xff0c;主要是针对窗口、控件和鼠标…

【leetcode】记录与查找:哈希表的题型分析

前言 &#x1f31f;&#x1f31f;本期讲解关于力扣的几篇题解的详细介绍~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么废话不…

AntDesign下,Select内嵌Menu标签,做一个多选下拉框,既可以搜索,还可以选择下拉项

话不多说&#xff0c;直接上效果和代码 效果图一&#xff1a; 效果图二&#xff1a; renderAddStyleOption (item: any) > {const { value } this.props;const { currentSelectedOptionIds, currentStyleId } this.state;const styleSettings value?.styleSettings;c…

css炫酷的3D水波纹文字效果实现详解

炫酷的3D水波纹文字效果实现详解 这里写目录标题 炫酷的3D水波纹文字效果实现详解项目概述技术栈核心实现1. 基础布局2. 渐变背景3. 文字效果实现3.1 基础样式3.2 文字漂浮动画 4. 水波纹效果4.1 模糊效果4.2 水波动画 5. 交互效果 技术要点项目难点与解决方案总结 项目概述 在…

P1036 [NOIP 2002 普及组] 选数(DFS)

题目描述 已知 n 个整数 x1​,x2​,⋯,xn​&#xff0c;以及 1 个整数 k&#xff08;k<n&#xff09;。从 n 个整数中任选 k 个整数相加&#xff0c;可分别得到一系列的和。例如当 n4&#xff0c;k3&#xff0c;4 个整数分别为 3,7,12,19 时&#xff0c;可得全部的组合与它…

后端思维之高并发处理方案

前言 在互联网时代&#xff0c;高并发已经成为后端开发者绕不开的话题。无论是电商平台的秒杀活动、抢购系统&#xff0c;还是社交应用的高频互动&#xff0c;高并发场景的出现往往伴随着巨大的技术挑战。 如何在流量激增的同时&#xff0c;确保系统稳定运行、快速响应&#xf…

14.2linux中platform无设备树情况下驱动LED灯(详细编写程序)_csdn

我尽量讲的更详细&#xff0c;为了关注我的粉丝&#xff01;&#xff01;&#xff01; 因为这跟之前的不一样&#xff0c;提出来驱动的分离和分层。 提到驱动分离和分层&#xff0c;必然可以联系上一章咱们知道的驱动-总线-设备。 在无设备树的状态下&#xff0c;必然要写寄存…

K8s的BackUP备份

文章目录 1、kubeadm 安装的单 master 节点数据备份和恢复方式2、Velero 工具3、Velero 服务部署4、备份还原数据 ETCD备份/还原有多种类型&#xff0c;取决于你 k8s 集群的搭建方式 1、kubeadm 安装的单 master 节点数据备份和恢复方式 拷贝 etcdctl 至 master 节点&#xf…

Ruoyi-vue plus 5.2.2 flowble设计流程点击开始流程图错误

网关设置条件或者是事件删除后出现&#xff0c;点击网关节点无法找到下面的事件节点。 配置页面事件错误&#xff0c;点背景配置进去了事件&#xff0c;发现再次加载&#xff0c;或者删除的时候VUE页面无法加载。 解决方式&#xff1a;查看XML文件&#xff0c;这个节点是否存在…

如何快速入门物联网单片机开发?

背景 物联网单片机硬件开发涉及多个阶段&#xff0c;元器件是否“自己设计”取决于具体需求。以下是详细解答和学习方案&#xff1a; 一、元器件是否自己设计&#xff1f; 通用元器件&#xff1a; 大多数情况下&#xff0c;开发者直接使用现成的标准化元器件&#xff08;如电阻…

在 .NET 8 中使用自定义令牌身份验证掌握 SignalR Hub 安全性

最近在练习做一个 Web 开发项目&#xff0c;需要使用 WebSockets 传输数据&#xff0c;实现实时通信。这是一个 React.js 项目&#xff0c;后端是 .NET。 虽然 MSDN 提供了出色的顶级文档&#xff0c;但它通常缺少高级用例所需的低级细节。 一种这样的场景是使用自定义令牌对…

基于springboot+vue的二手车交易系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…