vue 通过URL直接下载PDF文件而不是预览
项目需求:用户在点击下载时下载文件。
该项目为前后端分离项目,download不起作用。
我在做这个功能点时使用的方法是直接window.location.href = url
可在测试时却发现word等文件可以下载,而pdf文件却是进行预览而不是下载,这肯定是不行的,于是开始到网上寻找解决方法。开始时感觉是一件挺简单的事。结果发现要么是实现不了效果,要么代码巨多且需要后端配合,不过在我的不懈努力(摸鱼)下终于找到了两种方法。
一,downloadjs
github地址:https://github.com/rndme/download
// 安装 npm install downloadjs -S
// 导入 import download from "downloadjs" // 使用 download(url, strFileName, strMimeType);
download第一个参数为URL,第二个参数为文件名称,第三个参数文件类型,url必填,另外两个选填
遇到的问题
1.下载的文件打不开,且大小不对
// 中文名称文件下载 download(encodeURI(URL))
2.不能自定义名称
在URL进行转码后虽然可以下载PDF文件了,但名称却是转码后的名称,而不是原本的名称,这时我们用第二个参数进行命名时,名称是对了,可文件却出现打不开,大小不对的情况,暂时没找到解决方法。
二,file-saver
github地址:https://github.com/eligrey/FileSaver.js
该库是我之前写页面转PDF时使用到的库,既然之前可以保存pdf文件,那现在是不是也可以呢,上网一搜还真可以
// 安装 npm i file-saver
const that = this var oReq = new XMLHttpRequest() var URL= '' // URL 为URL地址 oReq.open('GET', URL, true) oReq.responseType = 'blob' oReq.onload = function() { var file = new Blob([oReq.response], { type: 'blob' }) FileSaver.saveAs(file, that.name) // that.name为文件名 } oReq.send()
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)