nuxt3项目使用pdfjs-dist预览pdf

9月前作者：我有一棵树分类：Toy博客阅读(29) 违法举报

这篇具有很好参考价值的文章主要介绍了nuxt3项目使用pdfjs-dist预览pdf。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

npm i pdfjs-dist

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

nuxt3项目使用pdfjs-dist预览pdf,pdf

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

nuxt3项目使用pdfjs-dist预览pdf,pdf

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

PDF.js

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

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

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

nuxt3项目使用pdfjs-dist预览pdf,pdf

文章来源地址https://www.toymoban.com/news/detail-704592.html

到了这里，关于nuxt3项目使用pdfjs-dist预览pdf的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

vue3 电子书 pdf转图片 pdf实现翻页效果 pdfjs-dist、turn.js电子书翻页效果

下载 turn.js 这里使用的是 turn4 ，需要下载到本地引入，通过npm下载会报错可以到官网下载，也可以直接在本博客下，已经上传到博客导入文件之前先创建 vue.config.js 适配一下jquery ，创建好文件以后，把以下代码复制进去回到vue页面，导入以下文件参考博客：GitHub -

2024年02月16日
浏览(39)
vue2 pdfjs-2.8.335-dist pdf文件在线预览功能

1、首先先将 pdfjs-2.8.335-dist 文件夹从网上搜索下载，复制到public文件夹下. 2、在components下新建组件PdfViewer.vue文件 3、在el-upload 中调用 pdf-viewer 组件 4、在el-upload 中的 on-preview方法中加上对应的src路径 internalPreview(file) { //判断需要预览的地方加 props—pdfView

2024年01月19日
浏览(47)
vue3打包踩坑记录‘readFile‘ is not exported by __vite-browser-external, imported by node_modules/pdfjs-dist

因为vue3项目是用不了vue-pdf所以用了pdfjs-dist，开发环境pdf查看是没问题正常使用，只是在打包的时候就报错，应该是由于pdfjs-dist.js使用了fs,fs是nodejs环境下的工具库,所以vite才会报错。 1、下载插件 2、vite.config.js配置这样轻松搞定打包报错问题。

2024年02月09日
浏览(48)
nuxt3项目在宝塔上使用pm2放到服务器

最近在将nuxt3项目扔到服务器上的时候遇到了一些问题，发现打包后的nuxt项目与正常的vue文件有些差别，缺失了index.html文件。这边就记录下nuxt3项目是怎么放到服务器上的🤔 一、打包nuxt3项目执行对应的打包命令 yarn build 二、找到打包后的文件三、这里我使用

2024年02月21日
浏览(39)
nuxt3 + pinia + swiper +element-plus + less + 腾讯地图创建项目及使用

在 nuxt3-app 目录下下载依赖运行再访问 http://localhost:3000 即可看到基础界面了（刚搭建的项目啥文件夹都没有，这里面基本都是我自己创建的。） assets ，存放一些静态资源，包括一些 Sass、Less ，在项目组件中引用的时候需要在开头使用 ~assets/ 符号，如果你的静态资源文件

2023年04月09日
浏览(40)
Nuxt3如何新建项目

1.新建一个文件目录 nuxt-app 2.命令行cd到目录下运行 npx nuxi init nuxt-test 回车运行下 nuxt-test是文件名自己随意 3.再cd nuxt-test到目录下运行npm install 4.运行完成后 npm run dev 启动项目显示以下页面 1.在app.vue根目录同级新建pages文件夹再新建一个index页面(新建文件目录参考官方文档

2024年02月13日
浏览(43)
宝塔部署Nuxt3项目（https）

之前在服务器搭建的项目都是用http的，但是一般来说都要换成https；因为https比http更加安全，数据不再是明文传输，更不容易被攻击/被第三方广告光顾；所以就有了将http换成https的想法。第一个需要升级的项目是我使用nuxt3重构的博客项目，期间遇到了诸多问题，所以想记录

2024年02月04日
浏览(48)
如何用docker容器部署nuxt3项目

Nuxt3是基于Vue3的一个开发框架，基于服务器端渲染SSR，可以更加方便的用于Vue的SEO优化。 Nuxt 3.0 新特性包括：更轻量：以现代浏览器为目标的服务器部署和客户端产物最多可缩小 75 倍更快：基于 nitro 提供动态代码分割能力，以优化冷启动性能 Hybrid：增量静态生成和其他

2024年02月14日
浏览(31)
Nuxt3 + Naive UI 的SSG项目分享（一）

自从Vue3发布后，学习Vue3就形成了一个趋势和热潮。 Vue3相比Vue2，引入tree-shaking，使得打包的整体体积变小了；在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力；采用proxy替换了之前的defineProperty，proxy有多达13种拦截方法；增加了

2023年04月09日
浏览(33)
Nuxt3项目中的问题汇总-刷新页面useFetch无返回

坑有千千万，汇总下目前的解决办法，也因为对框架的不够深入，掌握得有限，大家有更好的，请指教【抱拳】浏览器刷新的时候页面没有显示数据，接口data无返回。本身nuxt的useFetch在参数不变的情况下，数据是不会重新从后台接口去请求数据的，会直接拿上一次的结果。

2024年02月11日
浏览(38)