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()
复制代码

 

 
posted @   zy-lzh  阅读(8341)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
点击右上角即可分享
微信分享提示