vue中本地pdf预览

最新推荐文章于 2024-05-13 15:52:19 发布
最新推荐文章于 2024-05-13 15:52:19 发布
阅读量494 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35500778/article/details/117033041
版权

1.pdf文件在本地

注意：pdf文件一定要放在public文件夹中；在使用路径时需要使用绝对路径，不要用相对路径；

pdf在public中的绝对路径：

错误：‘/public/pdfwj.pdf’--------这是相对路径

正确：‘/pdfwj.pdf’--------这才是正确的绝对路径

 

happy-码蚁
关注
专栏目录
vue中预览pdf
蜗牛~~
07-18 1万+
如果后端返回的pdf地址，粘贴到浏览器的url框中，可以在浏览器中直接进行预览的，那么我们就用window.open，或 a标签，或iframe标签通过设置src进行预览即可。可以直接使用window.open（'获取到的pdf地址'）重新打开一个浏览器页签。通过浏览器页签直接实现预览功能（预览页面的样式，根据浏览器的不同，会略有差异），这种情况，上述方法解决不了，需要使用插件或者设置浏览器请求头的方式来解决。后端返回了服务器文件pdf的地址，粘贴到浏览器的url框中，单页pdf可以直接使用。
vue使用pdfjs-dist在电脑上展示PDF文件
weixin_52941842的博客
04-29 1797
踩坑：删除依赖或者重新拉取项目的时候再运行项目会报语法错误,这个时候就不要去添加什么loader了，除了raw-loader有用，试了大部分的loader都不管用，而且添加了raw-loader方法功能就用不了，因为方法被编译成字符串了，再去使用eval什么的去转也没必要。安装的时候一定要带上版本号，这里采用的是2.0.943（因为这个版本对于我目前的项目比较合适可以正常使用，其他版本大概率会报错），当前项目使用的是vue2，vue的版本是2.5.10。库中用于处理PDF文件的工作线程脚本。
vue+pdf.js预览本地pdf文件（可以复制文本，滚动页码展示）
Hi_MrXiao的博客
12-05 5680
3、解析pdf，获取pdf所有页数据，使用canvas渲染，并使用TextLayerBuilder创建文本层，可以复制文本信息。在这里就是因为微任务导致，所以我们这里渲染pdf任务可以每次渲染完一页后等待一定时间才执行下一页的渲染，空出时间给主线程。在渲染pdf数据时，当pdf文件很大渲染量很多时，会导致页面卡住，无法执行其他操作；在滚动时当前是第几页的页码同步更新展示：需要在渲染每页pdf时将每页的高度存起来，以及每页滚动的临界值。在滚动时，根据当前滚动距离和每页滚动的临界距离相比较，判断当前是第几页。
vue页面怎么显示本地的pdf文件
weixin_49577940的博客
11-15 5197
一 ,npm install --save vue-pdf 下载插件包 二 , 新建一个.vue页面 , 把下面代码全部复制过去 , 打开vue页面就是pdf了 <template> <div class="pdf"> <pdf v-for="currentPage in pageCount" :key="currentPage" :src="src" :page="currentPage" @loaded="loadPdfHandler"&gt...
vue中预览PDF文档
小破孩的博客
03-24 2万+
今日接到需求，需要在项目的某个页面中自定义预览PDF文档，于是使用 vue-pdf 插件来实现，方法如下： 先安装 vue-pdf 插件 npm install --save vue-pdf 在页面中引用实现： <template> <div class="scrollBox"> <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"><
Vue本地预览+上传
weixin_43899954的博客
08-08 346
Vue本地预览图片后上传基本功能记录 请先学习Vue后使用此代码，需要引用vue.js,请自行下载并引入。 遇到一个本地预览后上传的需求，话不多说直接上代码，直接复制，根据具体需求调整，亲测可用，目前数据类型尚未调试，后续更新后台接口。 // An highlighted block html, body { width: 100%; height: 100%; font-family: "微软雅黑"; background: #F8F8F8 !important; } #
vue在线预览PDF
weixin_42346984的博客
04-28 469
一、引入pdfjs-dist、axios包 npm i pdfjs-dist axios --save 二、pdfViewer组件 <template> <div class="pdf-viewer" tabIndex="1" > <!-- <div class="position page"> <span class="span_1" @click="pageUp" &
vue实现pdf预览
qq_42936616的博客
12-17 257
安装 npm install --save vue-pdf html 引用element框架 <template> <div class="pdf"> <div class="pdf__tab"> <div class="pdf__operation pageTurning"> <el-button @...
vue实现pdf文档在线预览功能
10-15
在Vue项目中实现PDF文档在线预览功能，主要依赖于`pdf.js`插件，它是一个JavaScript库，能够解析PDF文件并将其渲染到HTML5的Canvas...同时，对于Android系统不支持原生PDF预览的问题，`pdf.js`提供了很好的解决方案。
vue预览pdf文件的几种方法_vue pdf预览
2401_84433570的博客
04-29 1568
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】n() {正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
解决vue单页面应用打包后相对路径、绝对路径相关问题
10-14
主要介绍了解决vue单页面应用打包后相对路径、绝对路径相关问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中实现pdf文件预览功能
zyy2045的博客
06-23 2万+
实现的功能就是点击预览按钮，弹出对话框在线预览pdf文件 实现此功能的前提是需要在Vue项目中安装组件vue-pdf，在终端命令行输入运行如下语句：
Vue - 利用Vue-pdf实现在Vue项目中完美实现PDF文件预览功能
前端充电宝
04-28 326
Vue - 利用Vue-pdf实现在Vue项目中完美实现PDF文件预览功能
vue预览PDF文件的几种方法
最新发布
weixin_58495461的博客
05-13 6485
2.3 使用组件展示PDF文件。1.1页面结构 html。2.2 注册并引入组件。
Vue 项目实战——如何在页面中展示 PDF 文件以及 PDFObject 插件实战
热门推荐
黛琳ghz的博客，期待你的关注。
11-21 3万+
在之前的两篇关于 Print.js 文章中，我们已经初步学习了打印插件 Print.js 的使用，既然涉及到 PDF 的打印，如果想要预览 PDF 后再进行打印应该怎么做呢，接下来通过这篇文章记录一下 Vue 项目实战中，在页面中展示 PDF 文件的一些例子。
vue开发请求本地数据
Fecker曹的博客
10-17 2045
1.新建一个与index同级的db.json文件，里面放入假数据 2.在入口main.js中添加 import VueResource from 'vue-resource' Vue.use(VueResource) 3.分别在webpack.dev.conf.js中的const portfinder = require('portfinder')后面和Devserver后面添加‘---...
vue 本地pdf文件展示
weixin_42489478的博客
08-27 1576
<template> <!-- 第一种 embed 标签定义嵌入的内容，比如插件。 --> <!-- <embed class="pdf" src="../../../static/plugins/pdf/2021海宁智能化改造案例.pdf" frameborder="0" /> --> <!-- 第二种 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 --> <iframe .
vue 预览本地pdf等文件
iorn_mangg的博客
09-01 5398
新窗口预览pdf文件等，直接使用a标签即可（word文档直接下载）， 项目中遇到的问题是，预览放在项目中的本地pdf，无论如何都显示不出pdf的内容。后来发现，要预览的文件要放在public下， 使用绝对路径加载就可以了。 ...
vue预览本地pdf
09-09
要在Vue中预览本地PDF文件，可以使用vue-pdf插件来实现。首先，确保已经安装了vue-pdf插件。然后，你可以在Vue组件中使用<pdf>标签，并将本地PDF文件的路径作为src属性传递给它。这样，vue-pdf插件会将PDF文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值