找了很多帖子,都不行,

解决方法把链接处理成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. ArcGIS工具 - 批量删除空图层

    为了减少数据的冗余,我们经常需将数据库中的空图层(没有任何记录的要素类或表)删除,删除数据本来是一个很简单的操作,但如果数据量大,则需通过程序来处理.例如,删除成百上千个标准分幅DLG数据库中等高线数 ...

  2. 在 K8S Volume 中使用 subPath

    使用 subPath 有时,在单个 Pod 中共享卷以供多方使用是很有用的. volumeMounts.subPath 属性可用于指定所引用的卷内的子路径,而不是其根路径. 下面是一个使用同一共享卷的 ...

  3. hashlib 模块 subprocess 模块 logging日志模块

    今日内容 hashlib加密模块 1.何为加密 将明文数据处理成密文数据 让人看不懂 2.为什么加密 保证数据的安全 3.如何判断数据是否加密的 一串没有规律的字符串(数字.字母.符号) 4.密文的长 ...

  4. SQL中常用函数操作

    --在SQL SERVER中批量替换字符串的方法 update [Table] set [Field] = REPLACE([Field],'被替换的原内容','要替换的内容') update HBb ...

  5. 安装postcss-px-to-viewport 配置postcss.config.js 报错Error: true is not a PostCSS plugin

    因项目需要,用户突然要坚持小屏幕也要观看大屏代码,临时解决方案是加了一个postcss-px-to-viewport ,安装过程中报错Error: true is not a PostCSS plug ...

  6. css之transform属性的使用

    1.定义:Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等. 2.常用的属性值: (1)translate(移动):   这个属性值里面含有三个参数,依次 ...

  7. 增加for循环-泛型的概念

    增加for循环 增强for循环(也称for each循环)是JDK1.5以后出来的一个高级for循环,专门用来遍历数组和集合的.它的内部原理其实是个lterator迭代器,所以在遍历的过程中,不能对集 ...

  8. C#反射运行该类下的方法

    Text:反射的类名 s:方法名 data:参数 如果无参则: (string)method.Invoke(obj, null); Type type = typeof(Text); MethodIn ...

  9. Seal 0.4 发布:软件供应链安全洞察更上一层楼!

    今天,我们很高兴宣布 Seal 0.4 已正式发布!在上一个版本中,Seal 完成了从单一产品到全链路平台的转变,通过全局视图帮助用户掌握软件开发生命周期各个环节的安全状况. 在 Seal 0.4 中 ...

  10. JZOJ 1077. 【GDKOI2006】防御力量

    \(\text{Solution}\) 首先这个题目描述得不清不楚 反正做法是过 \(A\) 城引一条直线,算出直线两侧点数的 \(min\) 找到最优直线,即 \(min\) 最小的 那么重点在判断 ...