nuxt3项目使用pdfjs-dist预览pdf

使用的包的源代码是 pdfjs - npm

但是我们实际上项目中使用的是pdfjs打包后的dist文件,也就是pdfjs-dist - npm

所以我们需要使用这个命令

npm i pdfjs-dist

我们可以克隆pdfjs这个包来看源代码,里面有使用的例子,也可以根据源代码自己打包生成你想要的版本的pdfjs-dist,官方文档强调了对于新旧浏览器的区别,所以我们在使用dist包的时候也要注意浏览器的兼容

 你要是不嫌麻烦,可以使用源码打包自己的pdfjs-dist文件使用,但是一般我们不用这么干,npm上面有现成的

温馨提示,想学一门新的技术,好好看一下官方文档,比直接去网上搜怎么用块多了!认真点!

PDF.js

这个仓库是使用nuxt3 项目 实现的预览pdf,有需要的可以参考

https://gitee.com/yangjihong2113/pdfjs-nuxt3-demo

重点是新旧浏览器引入的包不同,低版本的浏览器需要使用legacy目录下的文件!

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue中数据可视化关系图展示与关系图分析

Vue中数据可视化关系图展示与关系图分析 数据可视化是现代Web应用程序的重要组成部分之一,它可以帮助我们以图形的方式呈现和分析复杂的数据关系。Vue.js是一个流行的JavaScript框架,它提供了强大的工具来构建数据可视化应用。本文将介绍如何使用Vue.js…

JavaWeb知识梳理(后端部分)

JavaWeb 静态web资源(如html 页面):指web页面中供人们浏览的数据始终是不变。 动态web资源:指web页面中供人们浏览的数据是由程序产生的,不同时间点访问web页面看到的内容各不相同。 静态web资源开发技术&#xff1…

Spring Data JPA:简化数据库交互的艺术

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

代码随想录第45天|70. 爬楼梯,322. 零钱兑换,279.完全平方数

70. 爬楼梯 开始按感觉做 class Solution {public int climbStairs(int n) {//第一版按感觉做//dp[i]爬到第i个台阶的方法数int[] dpnew int[n1];//初始化dp[0]1;dp[1]1;for(int i2;i<n;i){dp[i]dp[i-1]dp[i-2];}return dp[n];} } 改进-用完全背包做 这是背包里求排列问…

ubuntu server 更改时区:上海

1. 打开终端&#xff0c;在命令行中以超级用户或具有sudo权限的用户身份运行以下命令&#xff1a; sudo dpkg-reconfigure tzdata 这会打开一个对话框&#xff0c;用于选择系统的时区设置。 2. 在对话框中&#xff0c;使用上下箭头键在地区列表中选择"Asia"&#x…

vue表格不显示列号123456

我在网上找了半天&#xff0c;都是如何添加列号123456的&#xff0c;没有找到不显示列号的参考&#xff0c;现在把这个解决了&#xff0c;特此记录一下。 没有加右边的就会显示&#xff0c;加上右边的就隐藏了

npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...

使用 dumi 开发 React 组件库时&#xff0c;为避免每次修改都发布到 npm&#xff0c;需要在本地的测试项目中使用 npm link 为组件库建立软连接&#xff0c;方便本地调试。 结果在本地测试项目使用 $ npm link 组件库 后&#xff0c;使用内部组件确报错&#xff1a; react.dev…

Redis十大数据类型

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…

腾讯音乐基于 Apache Doris + 大模型构建全新智能数据服务平台

当前&#xff0c;大语言模型的应用正在全球范围内引发新一轮的技术革命与商业浪潮。腾讯音乐作为中国领先在线音乐娱乐平台&#xff0c;利用庞大用户群与多元场景的优势&#xff0c;持续探索大模型赛道的多元应用。本文将详细介绍腾讯音乐如何基于 Apache Doris 构建查询高效、…

基于Python+DenseNet121算法模型实现一个图像分类识别系统案例

目录 介绍在TensorFlow中的应用实战案例最后 一、介绍 DenseNet&#xff08;Densely Connected Convolutional Networks&#xff09;是一种卷积神经网络&#xff08;CNN&#xff09;架构&#xff0c;2017年由Gao Huang等人提出。该网络的核心思想是密集连接&#xff0c;即每…

Python实现猎人猎物优化算法(HPO)优化循环神经网络回归模型(LSTM回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 猎人猎物优化搜索算法(Hunter–prey optimizer, HPO)是由Naruei& Keynia于2022年提出的一种最新的…

【基础计算机网络1】认识计算机网络体系结构,了解计算机网络的大致模型(上)

前言 今天&#xff0c;小编我也要进入计算机网络的整个内容&#xff0c;虽然这个计算机网络的内容在考研部分中占比比较小&#xff0c;有些人不把这一部分当成重点&#xff0c;这种想法是错误的。我觉得考研的这四个内容都是非常重要的&#xff0c;我们需要进行全力以赴的对待每…

二叉树(上)

“路虽远&#xff0c;行则将至” ❤️主页&#xff1a;小赛毛 目录 1.树概念及结构 1.1树的概念 1.2 树的相关概念 1.3 树的表示&#xff08;树的存储&#xff09; 2.二叉树概念及结构 2.1概念 2.2现实中的二叉树 2.3 特殊的二叉树&#xff1a; 2.4 二叉树的性质 3.二叉树的顺…

RabbitMq消息模型-队列消息

队列消息分为2种&#xff1a; 基本模型&#xff08;SimpleQueue&#xff09;、工作模型&#xff08;WorkQueue&#xff09; 队列消息特点&#xff1a; 消息不会丢失 并且 有先进先出的顺序。消息接收是有顺序的&#xff0c;不是随机的&#xff0c;仅有一个消费者能拿到数据&…

Java 【异常】

一、认识异常 Exception 在 Java 中&#xff0c;将程序执行过程中发生的不正常行为称为异常 。 异常是异常exception&#xff0c;报错是报错error 1.算数异常 0不能作为除数&#xff0c;所以算数异常 2.空指针异常 arr不指向任何对象&#xff0c;打印不出arr的长度&#xff0c;…

Spring 6.X IoC 容器

目录 一、Spring IoC 容器和 Bean 简介1.1、容器概述1.3、使用 一、Spring IoC 容器和 Bean 简介 下面主要介绍 Spring 框架对控制反转 (IoC) 原理的实现 首先要说明的是&#xff1a;IoC 也称为依赖注入&#xff0c;这是一个过程。 其次依赖项的定义&#xff1a;对象仅通过构造…

C#,《小白学程序》第十六课:随机数(Random)第三,正态分布的随机数的计算方法与代码

1 随机数的问题 用 C# Random 类生成的随机数是平均分布的。也就是各数据段的出现的次数差不多。彩票号码属于这种随机数。 而很多很多常见的随机数&#xff0c;比如&#xff1a;成绩&#xff0c;却是符合正态分布的。 因而很多时候需要生成符合正态分布规律的随机数。 2 文…

ROS2-IRON Ubuntu-22.0 源码下载失败解决方法 vcs import --input

ROS2 一.ROS2 IRON环境搭建1.设置系统字符集为UTF-82.将RO2 apt 库添加到系统中3.添加ROS2 GPG key4.添加ROS 2 的软件源安装开发工具 二.下载ROS2sh源代码编译 一.ROS2 IRON环境搭建 虚拟机系统&#xff1a;Ubuntu22.04 虚拟机&#xff1a;VMware-player-full-16.2.5-2090451…

LeetCode刷题笔记【26】:贪心算法专题-4(柠檬水找零、根据身高重建队列、用最少数量的箭引爆气球)

文章目录 前置知识860.柠檬水找零题目描述解题思路代码 406.根据身高重建队列题目描述解题思路代码 452. 用最少数量的箭引爆气球题目描述踩坑-进行模拟正确思路的贪心 总结 前置知识 参考前文 参考文章&#xff1a; LeetCode刷题笔记【23】&#xff1a;贪心算法专题-1&#x…

OpenCV之形态学操作

形态学操作包含以下操作&#xff1a; 腐蚀 (Erosion)膨胀 (Dilation)开运算 (Opening)闭运算 (Closing)形态梯度 (Morphological Gradient)顶帽 (Top Hat)黑帽(Black Hat) 其中腐蚀和膨胀操作是最基本的操作&#xff0c;其他操作由这两个操作变换而来。 腐蚀 用一个结构元素…