vue预览本地pdf文件方法之a标签

最新推荐文章于 2024-06-19 23:01:21 发布
最新推荐文章于 2024-06-19 23:01:21 发布
阅读量3.7k 收藏 11
点赞数 2
分类专栏： VUE 文章标签： vue pdf预览
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rear0312/article/details/110073638
版权

1、pdf文件放在public文件下

2、a标签

a的样式可以根据需求自己设置，在此只简单说明问题

<a target="_blank" href="/1.pdf">相关论文</a>

同样的a标签如果换成word文档，则是下载效果

<a target="_blank" href="/d1.docx">word</a>

 

菜鸟茜
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
vue中预览pdf
蜗牛~~
07-18 1万+
如果后端返回的pdf地址，粘贴到浏览器的url框中，可以在浏览器中直接进行预览的，那么我们就用window.open，或 a标签，或iframe标签通过设置src进行预览即可。可以直接使用window.open（'获取到的pdf地址'）重新打开一个浏览器页签。通过浏览器页签直接实现预览功能（预览页面的样式，根据浏览器的不同，会略有差异），这种情况，上述方法解决不了，需要使用插件或者设置浏览器请求头的方式来解决。后端返回了服务器文件pdf的地址，粘贴到浏览器的url框中，单页pdf可以直接使用。
vue3 实现图片和文件(docx、excel、pdf)预览和下载的方法
weixin_43512977的博客
12-20 5860
vue3 实现图片和文件(docx、excel、pdf)预览和下载的方法
vue预览pdf文件的几种方法_vue pdf预览
最新发布
2401_84617080的博客
06-19 739
上一页下一页
vue a标签打开pdf的问题
AreYouOkLei的博客
04-29 1544
pdf路径问题： 1：pdf放到assets中 <a href="/assets/download/11.pdf" target="_blank">11</a> 并不能实现在新的页面打开PDF文件 2：pdf放到 创建src同级文件public， <a href="/public/download/11.pdf" target="_blank">11</a> 并不能实现在新的页面打开PDF文件 3.pdf放到 src同级文件static， &l
a 标签实现pdf，jpg图片预览及文件下载
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
04-19 2004
【代码】a 标签实现pdf，jpg图片预览及文件下载。
vue cli3的文件结构没有了static文件 静态资源放置和引用（a标签 打开预览本地文件的坑）
weixin_43292953的博客
08-14 1269
cli3不同于cli2有static文件来放置静态资源，但是有public文件 就是来放本地的静态资源的，有个需求是打开预览本地的pdf文件，最简单做法就是a标签target="_blank"新页面打开本地pdf文件 之前cli2就可以直接static/****/***.pdf路径拿到，但是本次使用vue cli3 用a标签打开时却一直打不开（public/****/***.pdf），总会跳转，各种查才发现，不仅位置不同，引用方法也是不同滴。如下： cli2.x--- 文件放置（static文件..
vue——预览PDF
奔跑的狮子
03-05 2105
/ // 有时PDF文件地址会出现跨域的情况,这里最好处理一下。//计算pdf页码总数。
iframe标签实现pdf预览功能
05-29
在本篇文章中，我们将深入探讨如何使用`iframe`标签结合Vue和React框架来实现在网页中预览PDF文件。 首先，`iframe`标签的基本用法如下： ```html <iframe src="path_to_your_pdf.pdf" width="100%" height="500">...
基于springboot的文件在线预览.rar
09-03
SpringBoot作为一个轻量级的框架，简化了Java Web应用的开发流程，而文件在线预览功能则可以让用户无需下载即可查看各种类型的文件，包括文本、图片、Word文档、PPT、PDF、Excel、压缩文件、多媒体文件以及CAD文档等...
实现点击按钮预览文件
08-08
- **PDF文件**：可以借助PDF.js等库，在浏览器中渲染PDF内容。 - **Office文档**：如.docx、.xlsx等，可以通过Microsoft的Office Web Components或Google Docs API实现在线预览。 - **视频/音频文件**：使用HTML5...
亲测，以html形式显示或预览word，excel，pdf，txt
05-24
在IT行业中，以HTML形式显示或预览不同的文档格式，如Word、Excel、PDF和TXT，是一种常见的需求，尤其在Web应用中。...通过学习和理解这个源码，开发者可以进一步掌握文件转换和前端预览的技术，提升自己的技能。
vue-pdf预览pdf文件流
01-13
在vue中引入vue-pdf插件预览pdf文件流
文件上传下载+预览功能
05-01
在IT领域，文件上传下载和预览功能是Web应用程序中非常常见且重要的组成部分，尤其在文档分享、在线协作和知识管理平台中。本篇将详细阐述这一功能的实现原理、技术选型以及相关知识点。 首先，文件上传是用户将...
vue 预览pdf文档
qq_38801090的博客
05-26 164
首先要使用iframe框架 <iframe class="pdf_body" :src="attachFile" frameborder="0" style="width:100%;height:90%;"></iframe> 其次:src="attachFile"就是pdf的路径，这样就可以实现预览了
vue pdf预览
sjyzch的博客
09-14 158
pdf预览
vue 预览PDF文件
小时光的博客
07-28 491
创建一个vue文件showContracts.vue <template> <div> <div> <el-button size="mini">上一页</el-button> <el-button size="mini">下一个</el-button> </div> <canvas v-for="item in totalPage" :key=...
vue中预览pdf(vue-pdf)
qq_44091061的博客
04-02 1149
vue中预览pdf(vue-pdf)
vue-pdf 预览pdf格式的文件
jennyya的博客
08-15 1258
需求：预览pdf格式的文件 实现： 一 安装 npm install --save vue-pdf 二 引入 import pdf from 'vue-pdf' // 哪个组件用到 在那个里面引入即可 <div class="form"> <p class="arrow" v-if="pageTotalNum>1"...
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预览本地盘的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文件。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸟茜

随多随少随你心意^-^

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值