Vue如何下载public中的pdf文件

已于 2023-02-01 11:00:36 修改
阅读量826 收藏
点赞数
文章标签： pdf vue Powered by 金山文档
于 2023-01-31 09:07:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LoveZJC96/article/details/128811467
版权
本文介绍了在Vue项目中如何配置vue.config.js以实现从public目录下载PDF文件的方法，包括通过a标签直接下载以及不配置vue.config.js的解决方案。
摘要由CSDN通过智能技术生成

  1. 现在 vue.config.js中配置

配置的内容如下

publicPath: "/public/",

  1. 在使用页面通过a标签下载

最低0.47元/天 解锁文章
LoveZJC12138
关注
vue公共下载文件方法
weixin_44445363的博客
06-08 509
一、在main.js中定义一个公共的方法 二、页面中的使用方法
vue项目js 公共js文件
01-02
一个vue项目的 js公共包 里面拥有很多 js封装好的方法 是一个工具类
vue项目下载public目录下的文件
九段刀客的博客
02-09 2471
click_down_excel() { let dom = document.createElement("a"); dom.href = "/static/importExcel/material.xlsx"; dom.download = "material.xlsx"; document.body.appendChild(dom); // 点击下载 dom.click(); document.body.remove.
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-public静态文件下 实现下载文件
cdfdfgrd的博客
08-06 535
vue-public静态文件下 实现下载文件
vue后台管理项目如何实现下载本地下的文件
Achong999的博客
04-28 875
herf为本地下载路径，文件在public目录下。// // 本地下载方法，文件放在public目录里。// 使用a标签下载。
【vue】js下载public静态文件
m0_65041204的博客
02-28 1579
前端如何下载public文件夹下的静态资源文件，js+vue
vue 下载public目录的公共文件提示“网站无法提取文件”或者下载下来文件打开是空白
qq_41643226的博客
03-23 1520
vue 前端项目，通过a标签下载文件，如果vue.config.js中配置了publicPath，需要在下载的文件地址前面加上配置的路径前缀。
vue中文件的下载
hyy4668的博客
07-22 698
下载前端静态资源 1.将需要下载的资源放在public中 2.在需要下载的组件A中，加入如下内容 <template> <div> <a :href="url('/用户管理-批量导入模板.xlsx')" download="用户管理-批量导入模板.xlsx"> <Button type="error">下载模板</Button> </a> </div> </template&g.
Vue实现public文件中exe类型文件下载
good_for_nt的博客
04-18 673
Exe文件下载
vue@cli3项目模板怎么使用public目录下的静态文件
10-15
主要介绍了vue@cli3项目模板怎么使用public目录下的静态文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue下载在前端存放的pdf文件
jimjiayu
09-28 1188
文件是在前端public文件夹下放的。
vue 3.0 下载本地pdf文件
qq_34417247的博客
07-21 1027
参与规则.pdf
vue实现下载pdf文件，但又不想安装多余插件
最新发布
sunyanjing_8949的博客
08-20 434
vue项目中我们常遇到需要下载pdf文件的问题，但是又不想安装多余的插件时，我们该怎么实现呢？这样就不用下载其余插件啦，亲测，好使！
vue cli 3 public文件夹
蚁族的奋斗的博客
03-28 7745
可以在浏览器地址栏范围public文件夹里面的东西，经常把一下需要用户下载的东西放到这里。
vue项目中点击下载 下载项目中的文件
yty1220的博客
10-21 636
1. 把想下载的文件放到 public 文件夹中。2.在相对应的下载方法中编写代码。
a标签无法下载pdf文件，只能预览时的解决方法
solitude1128的博客
07-11 1743
最后解决办法是，用http请求文件，接口返回文件流，前端处理后，就可以下载了。可能的问题有很多，我遇到的问题是域名不同，所以只能预览，不能下载。但是很困扰我的一个问题是我用axios，给一样的参数就不能用。jq的ajax就没问题，有大神可以帮忙解答下吗？随便搞个html文件就可以试了。记得引入jq的在线链接。
vue实现pdf文件下载
05-14
Vue实现PDF文件下载非常简单，只需要通过Vue的axios库向后端发送请求获取二进制PDF文件的数据流，然后将其转换为Blob对象，并使用URL.createObjectURL()将其转换为可下载的URL，接着再使用a标签的download属性实现下载即可。 具体实现如下： 1.安装axios库 npm install axios --save 2.在Vue组件中引入axios和FileSaver库 import axios from 'axios'; import FileSaver from 'file-saver'; 3.在Vue组件方法中实现PDF文件下载 downloadFile() { axios.get('http://localhost:8080/api/download/pdf', { responseType: 'arraybuffer' }) .then(response => { const blob = new Blob([response.data], { type: 'application/pdf' }); const fileName = 'test.pdf'; FileSaver.saveAs(blob, fileName); }) .catch(error => { console.error('Error downloading PDF file', error); }); } 4.在后端实现返回二进制PDF文件的接口 @RequestMapping(value = "/download/pdf", method = RequestMethod.GET) @ResponseBody public ResponseEntity<byte[]> downloadPDF() throws IOException { File file = new File("test.pdf"); byte[] bytes = FileUtils.readFileToByteArray(file); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_PDF); headers.setContentDispositionFormData("attachment", "test.pdf"); headers.setContentLength(bytes.length); return new ResponseEntity<byte[]>(bytes, headers, HttpStatus.OK); } 以上是Vue实现PDF文件下载的简单示例，可以通过修改接口地址和文件名来适应不同的场景。同时，需要注意的是该方法需要在前端启动了服务器的情况下才能正常使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值