vue-预览public(本地)文件下的pdf文件方式

最新推荐文章于 2025-05-09 16:48:13 发布

coinisi_li

最新推荐文章于 2025-05-09 16:48:13 发布

阅读量1.9k

点赞数 8

CC 4.0 BY-SA版权

文章标签： pdf

本文链接：https://blog.csdn.net/coinisi_li/article/details/135641443

本文介绍了在Vue项目中正确处理PDF文件的方法，强调了将PDF文件放在public文件夹下的static子文件夹，并指出window.open和iframe应使用绝对路径而非相对路径，以确保Webpack正确打包和引用资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.把文件放在public文件夹下

2.window.open( '/xxx.pdf' ）

注意：（ ../../public/exam.pdf'), 这样写是打不开的，不能写成相对路径。

iframe也是，不可以用相对路径，直接：/文件名.pdf 就可以。

3.注意：

1）在vue项目中，读取本地的pdf文件需要放到public下static文件夹中，不能放在别的地方；

2）引用时，不能使用相对路径，因为使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

coinisi_li

关注关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

关于Ruoyi-Vue-Pro框架上传PDF文件无法在线预览问题及解决方案

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

12-11

341

通过修改后端。

vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库

qq_41985405的博客

01-11

8956

如果后端给的不是CDN地址，而是一些POST接口，该接口返回二进制流，则可以调用接口获取文件的ArrayBuffer数据，传递给src属性。通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。读取文件的ArrayBuffer。

参与评论您还未登录，请先登录后发表或查看评论

vue element-ui读取pdf文件的方法

10-15

主要介绍了vue element-ui读取pdf文件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue 本地运行访问不到public目录下的文件

最新发布

柒个橙子的博客

05-09

324

在开发富文本编辑器时，使用TinyMCE并配置语言和样式属性时，需在public文件夹下创建tinymce文件夹，并将语言包和skins文件夹放入其中。配置过程中，若控制台报错，需检查vue.config.js中的publicPath配置。根据开发环境的不同，publicPath应设置为/union-h5（生产环境）或/（开发环境），以确保资源路径正确。通过动态配置publicPath，可以避免路径错误导致的资源加载问题。

vue@cli3 组件访问public里边的文件

xue_daqian的博客

02-20

3560

vuecli3 组件访问public里边的文件使用a标签下载文件模板，文件模板需要放在前端。需要将模板文件放置在public文件夹中，避免打包时被篡改，文件使用英文命名。修改vue.config.js文件里面的publicPath,类似于这种 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', } 组件里引用，首先需要

vue-直接打开本地文件下的pdf文件

xxuxioxx的博客

03-14

5397

直接打开本地文件下的pdf文件

vue预览本地pdf文件.

weixin_50061893的博客

02-25

4349

预览pdf

如何访问public目录下的文件

m0_57236802的博客

11-10

2595

在Web开发框架（如React, Vue, Angular）中，当构建项目时，这些框架的构建工具会将所有的静态资源复制到构建输出目录中（通常是。目录是一个特殊的目录，用于存放静态资源，如图片、JavaScript文件、CSS样式表和其他需要直接通过浏览器访问的文件。目录的具体名称可能有所不同，例如在Create React App中，你将静态资源放在项目根目录下的。文件夹中，而在Vue CLI或Angular CLI中，你可能会将它们放在。请注意，根据你的开发环境或框架，如果文件位于子目录中，例如。

vue-pdf-search-viewer:基于Vue.js和Pdf.js的Pdf查看器，支持pdf视图，按关键字搜索和更改页面

04-01

vue-pdf-搜索查看器当前分支有一个使用unpack lib以便在发布之前调试lib的示例。项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 项目...

vue实现在线预览pdf文件和下载（pdf.js）

10-15

在本文中，我们将详细探讨如何使用Vue.js实现在线预览PDF文件以及下载功能，这里采用的插件是pdf.js，一个广泛使用的开源PDF阅读器，由Mozilla基金会开发。首先，了解pdf.js的基本概念非常重要。pdf.js能够将PDF...

vue-cli3访问public文件夹静态资源报错的解决方式

10-14

主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue获取本地pdf_Vue

weixin_39880666的博客

01-13

1048

在网页上打开一个pdf文件最简单的方法就是另外打开一个页面//url 为pdf路径window.open(url, "_blank");此篇文章是使用pdf插件打开pdf，下图是需要放到 static 静态文件夹里的内容~~???? 点击此处下载 pdf 相关文件image.png效果图：image.png代码如下：export default {data(){return{url:'https://...

Vue如何访问Public文件夹

汪程序员

05-01

1万+

说明为什么需要访问Public文件夹的内容？一般都是放在assets下面，但是无法实现动态访问，这就造成如果你要动态加载一个图片或者视频是不行的。比如：我现在把testHuawei.mp4放在assets文件夹下面，那么他会被打包，这时候，运行，你找到这个图片，它的路径为： http://localhost:8081/media/testHuawei.c4367207.mp4 多出一个c4367207（这是内部为了安全），这样你在写代码无法动态加载，因为只要是文件不一样，生成的数值也是不一样。

vue+pdf.js预览本地pdf文件（可以复制文本，滚动页码展示）

Hi_MrXiao的博客

12-05

6567

3、解析pdf，获取pdf所有页数据，使用canvas渲染，并使用TextLayerBuilder创建文本层，可以复制文本信息。在这里就是因为微任务导致，所以我们这里渲染pdf任务可以每次渲染完一页后等待一定时间才执行下一页的渲染，空出时间给主线程。在渲染pdf数据时，当pdf文件很大渲染量很多时，会导致页面卡住，无法执行其他操作；在滚动时当前是第几页的页码同步更新展示：需要在渲染每页pdf时将每页的高度存起来，以及每页滚动的临界值。在滚动时，根据当前滚动距离和每页滚动的临界距离相比较，判断当前是第几页。

vue实现本地预览word(docx)、excel(xlsx)、pdf文件

热门推荐

qq_45158026的博客

10-14

2万+

vue实现本地浏览器预览word(docx)、excel(xlsx)、pdf文件

vue 页面实现本地预览 pdf png docx txt excel pptx等文件预览

qq_34207156的博客

03-02

1635

vue 预览本地pdf png docx TXTexcel pptx 文件

vue引用public文件夹中文件

无心使然云中漫步

12-13

1万+

可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。

vue访问本地public文件夹下面的文件 404

云

07-19

1401

vue访问本地public文件夹下面的文件 404

vue预览本地盘的pdf文件

09-11

要在Vue中预览本地盘的PDF文件，可以使用vue-pdf和pdfh5插件。首先，确保你已经安装了这两个插件。然后，按照以下步骤进行操作： 1. 整理对应的JSON文件，将其存放在本地。 2. 编写界面和逻辑代码，创建一个级联选择器用于选择PDF文件。 3. 将PDF文件放入public路径下的file文件夹中。这样的文件不会被打包编译，可以直接在线上访问和显示。 4. 在Vue组件中导入vue-pdf和pdfh5插件。 5. 使用vue-pdf组件来加载和显示PDF文件。可以通过设置src属性为PDF文件的路径来实现。 6. 如果需要在浙政钉上运行，可以使用pdfh5插件来预览PDF文件。 7. 如果只是在浏览器上运行，可以直接使用iframe标签来嵌入PDF文件。总结：通过整理对应的JSON文件、编写界面和逻辑代码、使用vue-pdf和pdfh5插件以及设置src属性来预览本地盘的PDF文件。