找了很多帖子,都不行,

解决方法把链接处理成blob文件再调用下载。

但是仍然不行,最终原因找到:

缺少了这一部创建,需要把二进制数据重新用 Blob对象申明下

let data = new Blob([blob], {
type: "application/pdf;charset=UTF-8",
});

下面是方法:

// 下载
downloadFile(file) {
let url = this.handleImg(file);
this.getBlob(url).then((blob) => {
// 成功后下载
this.saveAs(blob, file);
});
},
// 链接转换blob文件
getBlob(url) {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
},
// 下载pdf
saveAs(blob, filename) {
let a = document.createElement("a");
let data = new Blob([blob], {
type: "application/pdf;charset=UTF-8",
});
a.style.display = "none";
a.download = filename;
a.href = URL.createObjectURL(data);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(a.href); //释放内存
},

补充:之后下载可以了,但是发现发下载下来打开后全是空白页

查询了一番找到的结果都是:

需要设置 responseType: 'blob' ,但是这里已经设置了还是不行,无奈认为是不是ajax的写法有问题,又换成 axios 试也不行,然后又再百度搜,搜啊搜,终于。。。

找到了一篇帖子。说 mockJs 可能会影响,给相应拦截的 responseType修改为” “ ,所以导致原先设置的 responseType: 'blob' 无效,也就进而导致了空白页(IE上面是乱码)

原文地址:https://www.cnblogs.com/jdWu-d/archive/2020/07/31/13410664.html

然后去入口文件搜索,果然看到有引入 mock js , 直接两个 ”//“, 问题就解决了。

最终 axios的代码如下:

// 下载
downloadFile(file) {
let url = this.handleImg(file);
axios({
method: "get",
url: url,
responseType: "blob",
headers: { "Content-Type": "blob" },
}).then((res) => {
console.log(res);
this.saveAs(res.data, file);
});
},
// 下载pdf
saveAs(blob, filename) {
let data = new Blob([blob], {
type: "application/pdf;charset-UTF-8",
});
let a = document.createElement("a");
a.style.display = "none";
a.download = filename;
a.href = URL.createObjectURL(data);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(a.href); //释放内存
},

responseType:'blob'

有关谷歌下载PDF文件而不是直接打开预览的问题的更多相关文章

  1. HTML 单击a标签 实现下载文件而不是浏览器打开预览

    <a d ownload class="down" title="">

  2. 纯前端下载pdf链接文件,而不是打开预览的解决方案

    纯前端下载pdf链接文件,而不是打开预览的解决方案 一,介绍与需求 1.1,介绍 XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行 ...

  3. 阿里云OSS下载pdf文件,并在pdf文件上添加水印

    代码: 兵马未动,粮草先行 作者: 传说中的汽水枪 如有错误,请留言指正,欢迎一起探讨. 转载请注明出处. 公司要求从阿里云OSS下载pdf文件并且需要添加水印. 因此这里总结一下. 首先添加了一个F ...

  4. 使用java的 htpUrlConnection post请求 下载pdf文件,然后输出到页面进行预览和下载

    使用java的 htpUrlConnection post请求 下载pdf文件,然后输出到页面进行预览和下载 2018年06月07日 10:42:26 守望dfdfdf 阅读数:235 标签: jav ...

  5. 知网下载pdf文件的方法

    title: 知网下载pdf文件的方法 toc: false date: 2018-11-02 17:54:43 categories: methods tags: 知网 平时我们使用的是国内版的知网 ...

  6. 从七牛服务下载PDF文件

    /** * 从七牛下载PDF文件 * @param request * @param response * @param exhiId * @throws MalformedURLException ...

  7. 下载apk文件浏览器会直接打开并显示乱码的问题

    今天同事反映他的apk文件在自己的老项目中下载有问题:下载apk文件浏览器会直接打开并显示乱码,在别的项目中就没有问题. 后分析response的content-type发现,老项目的类型是text/ ...

  8. 谷歌发布 Android 8.1 首个开发者预览版,优化内存效率

    今晨,谷歌推出了 Android 8.1 首个开发者预览版,此次升级涵盖了针对多个功能的提升优化,其中包含对 Android Go (设备运行内存小于等于 1 GB)和加速设备上对机器学习的全新神经网 ...

  9. 项目中的那些事---下载pdf文件

    最近做了一个下载pdf文档的需求,本以为使用HTML5中<a>标签的属性download就能简单搞定,不料IE竟然不支持这一简单粗暴的H5新特性,而是直接在网页中打开, 于是各种搜索之后得 ...

  10. android默认浏览器response下载PDF文件

    下载出来的文件不是PDF,而是xxx.htm文件,原因是response的header配置有问题. android默认浏览器的情况下,header的配置应该写成.(java 为例) response. ...

随机推荐

  1. org.apache.catalina.startup.HostConfig.deployWAR Error deploying web application archive

    昨天23点给一个老项目改完打包发布到云服务器后报错,Tomcat9 启动不了,白折腾了我几个小时. 这错误以前遇到过,由于太过久远已经忘记,特此记录 错误日志 22-Dec-2021 23:52:18 ...

  2. JavaScript 浅拷贝和深拷贝

    JavaScript 中的拷贝分为两种:浅拷贝和深拷贝. 一.浅拷贝 浅拷贝是指在拷贝过程中,只拷贝一个对象中的指针,而不拷贝实际的数据.所以,浅拷贝中修改新对象中的数据时,原对象中的数据也会被改变. ...

  3. 将IoTdb注册为Windows服务

    昨天写的文章<Windows Server上部署IoTdb 集群>,Windows下的InfluxDB是控制台程序,打开窗口后,很容易被别人给关掉,因此考虑做成Windows服务,nssm ...

  4. Echarts点击多组数据多个柱子中的一个柱子,获取当前点击的是第几组数据,并获取点击的是当前组别第几根柱子,以及对应横坐标,

    遇到一需求,一般都是点击图后获取其中一组数据就可以了,不需要详细到获取点击了当前X轴对应的其中的哪个, 今天的需求是 Echarts点击多组数据多个柱子中的一个柱子,获取当前点击的是第几组数据,并获取 ...

  5. 判断一个对象是否是数组的n个方法,typeOf不能判断引用类型对象

  6. Angular8中共享模块,共享组件的写法(anular其他模块组件引用方法)

    Angular8中共享模块,共享组件的写法(anular其他模块组件引用方法) 第一步:全局创建一个共享的module 这里示例创建一个模块common-share 创建完成后,会生成两个文件 文件1 ...

  7. 【ASP.NET Core】动态映射MVC路由

    ASP.NET Core 中的几大功能模块(Razor Pages.MVC.SignalR/Blazor.Mini-API 等等)都以终结点(End Point)的方式公开.在HTTP管道上调用时,其 ...

  8. linux命令与公私钥

    昨日内容回顾 etc目录 配置相关 /etc/profile 环境变量文件 /etc/motd 开机欢迎界面 usr目录 程序相关 四种安装软件的方式 1.yum安装 自动解决依赖性问题 2.rap安 ...

  9. windows10环境下的RabbitMQ安装步骤

    RabbitMQ是一个在AMQP协议标准基础上完整的,可复用的企业消息系统.它遵循Mozilla Public License开源协议,采用 Erlang 实现的工业级的消息队列(MQ)服务器,Rab ...

  10. C# 编写Windows Service Windows服务程序

    一.新建项目--选择Windows 服务,输入新的项目名称,点击确定. 二.服务名称的设置.服务添加安装程序.服务程序代码 1.服务名称的设置:视图 - 解决方案资源管理器 - 你创建的服务项目 默认 ...