vue a标签打开pdf的问题

最新推荐文章于 2025-01-08 13:23:11 发布
原创 最新推荐文章于 2025-01-08 13:23:11 发布 · 1.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #elementui

本文探讨了如何在不同文件夹结构下（assets, public, static）正确引用并点击PDF文件，以实现在新页面打开。提供了解决方案和路径优化建议，适用于前端开发者和网站管理员。

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，

<a href="/static/download/11.pdf" target="_blank">11</a>

前端vue实现PDF预览
qq_45021462的博客
09-01 1490
一、使用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项目pdf(base64)转图片遇到的问题及解决方法
12-10
前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细,在实现的过程中遇到很多坑,经过一天的研究终于实现了这个功能,分享一下我在这个功能中遇到的问题和解决方法 要注明的是这里用到...
这将是你看到过最全的pdf预览解决方案
qq_42365082的博客
07-07 8295
最近做项目遇到在线预览和下载pdf文件，试了多种pdf插件，例如（ie无法直接浏览），最终决定用，这篇文章记录一下我做技术选型的过程。pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 缺点：google的word excel ppt 预览资源，必须是公共可访问的。而且谷歌浏览器上点击就会下载，IE上可以选择是预览还是下载直接通过页面内嵌iframe 此外还可以在iframe标签之间提供一个提示类似这样 ......
a标签下载txt文件自动打开预览的问题
m0_61833460的博客
01-05 2829
由于浏览器的特性.txt .pdf 等等文件放在a标签的href属性中会被直接打开，这时可以给a添加download属性强制下载，但是当执行跨域下载文件时download属性就会失效，这里记录下我的解决方法： html: <a v-for="(item, index) in article.annex" class="cur" @click="downloadFile(baseUrl + item.path,item.name)" :key="index" >{{ item.nam
HTML的页面链接A标签.pdf
07-14
HTML的页面链接A标签.pdf
a 标签实现pdf，jpg图片预览及文件下载
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
04-19 2993
【代码】a 标签实现pdf，jpg图片预览及文件下载。
vue预览本地pdf文件方法之a标签
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
11-24 4041
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文件和下载（pdf.js）
10-15
然后在标签中，我们需要定义一个Vue组件，这个组件中包含data和methods，以便动态加载PDF文件的路径，并且处理兼容性问题，如IE的缓存问题。组件的mounted生命周期钩子用于确保组件被挂载后执行加载PDF的操作。 ...
vue中如何实现pdf文件预览的方法
10-18
综上所述，通过`iframe`标签和`pdfjs-dist`库，我们可以有效地在Vue项目中实现PDF文件的预览功能。选择哪种方法取决于具体需求，如果项目中已经存在能够直接显示的PDF链接，使用`iframe`是一个快速且简单的解决方案...
vue element-ui读取pdf文件的方法
10-15
在Vue组件的中定义好界面后，标签内将会编写实现PDF文件读取功能的JavaScript代码。脚本部分需要导入pdf.js库，并配置worker文件的路径。在Vue实例的data函数中定义了多个属性，这些属性包含了PDF文件的相关信息，...
用a标签实现下载和弹出新页签预览pdf
SZHFCLXX的博客
01-24 1441
下载中href地址中有api即其实质就是调了个接口；而预览中的href地址是纯远程文件所在路径，不会有api的存在！如果出现点击查看弹出了新页签却不是预览而是继续下载的情况，多半就是复制的时候加了api忘了去掉，导致又去调了下载的接口，而不是去远程找文件展示！
关于ie中使用a标签无法打开（预览）pdf问题
gqz_的博客
10-11 5323
html代码： &lt;button id="cLink"&gt;pdf查看&lt;/button&gt; &lt;a target='_blank' href="#" id="jumpUrl"&gt;&lt;span id="jumpClick" &gt;&lt;/span&gt;&lt;/a&gt; js代码： $(fu
vue中用浏览器下载pdf文件，直接写a标签默认打开，用fetch函数变成下载
最新发布
weixin_44212344的博客
01-08 537
vue中用浏览器下载pdf文件，直接写a标签默认打开，用fetch函数变成下载
【常用代码】vue中使用a标签下载文件pdf、docx、doc，xls等，赋值文件名
qq_51055690的博客
04-14 2669
有文件路径，项目域名+文件路径打开，可以直接在浏览器新窗口下载文件，使用window.open打开还会阅读pdf，而不会下载pdf文件。
vue 文档.PDF无法预览解决方法
TheWebGuy的博客
07-22 2625
在预览的时候，.pdf文件可以正常预览，但是.PDF就无法预览，后来找到了解决方法，将文件格式小写后判断是不是.pdf，如果是就正常预览，方法很简单，代码如下： // 文档预览 handleDocView(docInfo) { console.log('docInfo is :', docInfo) switch (docInfo.resourceType) { case 'application/pdf': this.curren
vue中如何用a标签打开本地图片
haishangfeie的博客
11-16 7346
vue中如何用a标签打开本地图片vue中如何用a标签打开本地图片扯点废话最后 vue中如何用a标签打开本地图片 不知道各位有没有遇到希望在vue中点击一下a标签就打开本地图片这种情况。话说，会看到这篇博客的话应该是遇到了才对吧。 可以这样写： &amp;lt;a :href=&quot;require('../../img/test.jpg')&quot; target=&quot;_blank&quot;&amp;gt;te...
vue获取本地pdf_vue可以引入本地的pdf文件吗？现在引入直接报404
weixin_33592736的博客
02-11 1399
报错路径打印出来和点进去报错点进去插件用了vue-pdf，项目用了proxy转地址，走地址时跑到了后台路径。我现在想实现的是引入本地项目public文件夹下的pdf文件，不走后台路径。走地址直接走成这个了v-for="i in numPages":key="i":src="src":page="i"@page-loaded="pageLoaded($event)">data() {retur...
a标签下载pdf download失效 （直接打开网页）
wl516372370的博客
12-29 4834
今天在写项目时遇到的问题： （暂未解决） 贴代码。 链接是一个pdf地址，点击链接，直接打开了该pdf，想要实现点击直接下载该pdf <a href="http://file.xxx.pdf" download>点击下载</a> 一般的文件可以直接使用链接进行下载，但图片、pdf等可以直接打开的文件只会预览，不会直接下载。 在网上找了很多解决办法（应该是跨域导致的）： 如： <a href="javascript:void(0)" download onclick="d
<a href="c:/1.pdf"> 无法打开本地1.pdf
q527641488的博客
07-10 831
浏览器可以打开，通过链接却打不开，原因是： URL里只应该是网址,而不是什么本地磁盘路径 文件的路径应该是相对路径。 比如如果pdf文件和页面在同一个目录下，那么文件路径就是文件名。如果文件在子文件夹下，那么路径就是/subfolder/1.pdf。 永远不要使用绝对路径！
vue object标签查看pdf如何保持当前分辨率
09-10
Vue.js本身并不直接支持PDF文件的显示，但它可以与其他库配合来实现在网页上展示PDF。如果你想在Object标签（`<object>`）中预览PDF并...请注意，由于浏览器安全限制，用户可能需要手动点击`<object>`元素才能打开PDF。
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值