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

最新推荐文章于 2025-05-19 15:23:20 发布
最新推荐文章于 2025-05-19 15:23:20 发布
阅读量3.9k 收藏 12
点赞数 4
CC 4.0 BY-SA版权
分类专栏： VUE 文章标签： vue pdf预览
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rear0312/article/details/110073638
这篇博客介绍了如何在HTML中使用`<a>`标签创建链接，展示了一个指向PDF文件的链接，点击后会在新窗口中打开。同时，也展示了如何通过`<a>`标签创建一个下载Word文档的链接，实现直接下载的效果。

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

1、pdf文件放在public文件下

2、a标签

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

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

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

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

 

vue中预览pdf
蜗牛~~
07-18 1万+
如果后端返回的pdf地址，粘贴到浏览器的url框中，可以在浏览器中直接进行预览的，那么我们就用window.open，或 a标签，或iframe标签通过设置src进行预览即可。可以直接使用window.open（'获取到的pdf地址'）重新打开一个浏览器页签。通过浏览器页签直接实现预览功能（预览页面的样式，根据浏览器的不同，会略有差异），这种情况，上述方法解决不了，需要使用插件或者设置浏览器请求头的方式来解决。后端返回了服务器文件pdf的地址，粘贴到浏览器的url框中，单页pdf可以直接使用。
前端vue实现PDF预览
qq_45021462的博客
09-01 1425
一、使用a标签 <a href="http://xxx.xx.cn/test1.pdf">pdf</a> 注意，href地址必须是文件的绝对位置，相对位置不可以。也就是说url写为"…/assets/pdf/test1.pdf"，这样访问不到PDF文件。 点击链接在新窗口打开预览PDF文件，和使用浏览器输入文件地址打开文件一样。 二、使用iframe标签 <div class="iframe-pdf"> <iframe src="http://xxx.xx.c
vue a标签打开pdf的问题
AreYouOkLei的博客
04-29 1705
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
Vue 通过调用文件流实现 PDF 文件在线预览的方法
最新发布
sinat_37775891的博客
05-19 1021
在Vue项目中实现PDF文件流的预览，可以通过多种方案实现。方案一利用浏览器原生支持，通过iframe直接预览PDF文件路径，或通过设置响应头Content-Disposition: inline实现文件流的内嵌显示。方案二使用PDF.js，通过viewer.html预览PDF文件，或处理文件流后渲染到Canvas中。方案三使用vue-pdf插件，将文件流转换为Blob后预览。以文档管理系统为例，用户可以通过调用后端接口获取合同PDF文件流，并选择上述任一方案实现预览功能。
a 标签实现pdf，jpg图片预览及文件下载
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
04-19 2926
【代码】a 标签实现pdf，jpg图片预览及文件下载。
vue cli3的文件结构没有了static文件 静态资源放置和引用（a标签 打开预览本地文件的坑）
weixin_43292953的博客
08-14 1327
cli3不同于cli2有static文件来放置静态资源，但是有public文件 就是来放本地的静态资源的，有个需求是打开预览本地的pdf文件，最简单做法就是a标签target="_blank"新页面打开本地pdf文件 之前cli2就可以直接static/****/***.pdf路径拿到，但是本次使用vue cli3 用a标签打开时却一直打不开（public/****/***.pdf），总会跳转，各种查才发现，不仅位置不同，引用方法也是不同滴。如下： cli2.x--- 文件放置（static文件..
vue——预览PDF
奔跑的狮子
03-05 2224
/ // 有时PDF文件地址会出现跨域的情况,这里最好处理一下。//计算pdf页码总数。
vue预览本地pdf
09-09
要在Vue中预览本地PDF文件，可以使用vue-pdf插件来实现。首先，确保已经安装了vue-pdf插件。然后，你可以在Vue组件中使用<pdf>标签，并将本地PDF文件的路径作为src属性传递给它。这样，vue-pdf插件会将PDF文件...
vue3使用vue-pdf-embed预览文件流格式的pdf文件
qq_42661587的博客
12-21 5875
安装vue-pdf-embed，'data:application/pdf;base64,' + 接口获取的文件流;
vue预览本地盘的pdf文件
09-11
要在Vue中预览本地盘的PDF文件，可以使用vue-pdf和pdfh5插件。首先，确保你已经安装了这两个插件。然后，按照以下步骤进行操作： 1. 整理对应的JSON文件，将其存放在本地。 2. 编写界面和逻辑代码，创建一个级联...
vue 预览pdf文档
qq_38801090的博客
05-26 228
首先要使用iframe框架 <iframe class="pdf_body" :src="attachFile" frameborder="0" style="width:100%;height:90%;"></iframe> 其次:src="attachFile"就是pdf的路径，这样就可以实现预览了
vue-pdf预览pdf文件流
01-13
在vue中引入vue-pdf插件预览pdf文件流
vue pdf预览
sjyzch的博客
09-14 203
pdf预览
vue预览PDF文件
cnzzs的博客
08-09 1977
在查阅PDF报告，可以使用iframe标签去绑定URL地址。但是浏览器会有跨域限制，一些文件无法直接访问。思路就是使用文件流查看，如果后端返回的是文件流就不需要将在线地址转文件流。以下为当后端传给的是一个PDF地址时的解决方案1.将文件下载转换成blob登录后复制 const response = await axio...
vue 预览PDF文件
小时光的博客
07-28 566
创建一个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 1252
vue中预览pdf(vue-pdf)
vue-pdf 预览pdf格式的文件
jennyya的博客
08-15 1299
需求：预览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 的预览
weixin_44692308的博客
07-26 1232
本文将分享如何在 Vue 项目中实现 PDF 预览功能
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序媛七分

随多随少随你心意^-^

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

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

打赏作者

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

抵扣说明：

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

余额充值