JS使用技巧-如何解决谷歌浏览器下载图片、PDF文档时只打开不下载的问题?

H5+JS页面直接查看PDF文件 移动端H5+JS页面直接查看PDF文件,纯H5的将pdf通过canvas重新绘制成数据流,展示到页面上。 立即下载

问题描述:

页面下载跨域的图片、pdf文件,浏览器总是自动打开,并且在下载列表里面不显示。

如何解决谷歌浏览器下载图片、PDF文档时只打开不下载的问题?如何变成直接下载?

解决方法:

使用js获取下载流,重新生成本地下载链接,再触发下载事件,代码如下:

function getFile(url,fileName){
	var httpRequest = new XMLHttpRequest();
	//指定响应类型,这决定了浏览器对返回内容的解析方式,设置为空或者text会作为字符解析、json会作为json解析,blob和arraybuffer会作为字节流解析
	httpRequest.responseType ='arraybuffer';
	httpRequest.open('GET', url, true);
	httpRequest.onload  = function () {
		if (httpRequest.readyState == 4 && httpRequest.status == 200) {
			//只有responseType为空或者text,才会使用responseText获取内容,其他情况                        httpRequest.response就是你需要的不含http头的返回内容
			var content = httpRequest.response;
		    var elink = document.createElement('a');
		    elink.download = fileName;
		    elink.style.display = 'none';
		    var blob = new Blob([content]);
			//创建指向内存中字节流的链接
		    elink.href = URL.createObjectURL(blob);
		    document.body.appendChild(elink);
	        elink.click();
		    document.body.removeChild(elink);
		}
	};
	httpRequest.send();
}

亲测可用,在谷歌浏览器点击图片和pdf,就可以显示下载内容,而不是在新tab页打开了

华为OD机试 新系统真题 【数字系统转换器】 华为OD机试 新系统真题【数字系统转换器】,提供C语言、Java、C++、Python、Go、JavaScript源码实现,并提供完整思路讲解,以及在线OJ模拟做题。华为OD机试真题【数字系统转换器】多语言题解。 阅读详情

相关推荐

MultiOTP Credential Provider避坑指南:从安装到RDP双因素认证的全流程解析

本文详细解析了MultiOTP Credential Provider从安装到实现RDP双因素认证(MFA)的全流程,重点分享了Docker部署、Active Directory集成及网络级认证(NLA)兼容性等环节的实战避坑经验,旨在帮助运维人员高效、稳定地部署离线双因素认证方案,提升Windows远程桌面安全性。

weixin_29255731的博客 642

js下载文件,点击的时候变成了打开预览

文件下载, a标签下载, 图片下载跨域, js下载文件

Leon4055的博客 3969

【AI气象6】Skilful nowcasting of extreme precipitation with NowcastNet

极端降水是气象灾害的重要因素,因此迫切需要通过高分辨率、长时间预报和局部细节的精准短期预报来减轻其社会经济影响。当前的方法存在模糊、衰减、强度或位置误差,基于物理的数值方法在捕捉关键的混沌动态(如对流起始)时面临挑战,而数据驱动的学习方法则未能遵循内在的物理法则(如平流守恒)。我们提出了 NowcastNet,这是一种针对极端降水的非线性短期预报模型,将物理演变方案与条件学习方法统一到一个端到端的神经网络框架中,通过优化预测误差进行训练。基于来自美国和中国的雷达观测数据,我们的模型能够生成物理上合理的降水短

weixin_51473374的博客 2323

JS 解决txt文件直接打开而不是下载

{valueList?.map(url => { let href = url if (getFileName(url)?.endsWith('.txt')) { href = href + '?response-content-type=application/octet-stream' } return <div style={{ width: '2...

雪猫的博客 1459

1.Fay-UE5数字人工程导入(UE数字人系统教程)

ue5数字人系列教程(含源文件工程)

1万+

OpenDRIVE车道计算避坑指南:为什么你的poly3曲线总对不齐?

本文深入解析OpenDRIVE标准中车道几何计算的三大核心难题:参数化三次多项式(ParamPoly3)的坐标系转换与参数映射、车道偏移与宽度的优先级判定,以及螺旋线(Spiral)接续的平滑性保障。通过实战案例与代码示例,提供了一套避免车道线错位与曲率不连续的精确计算与验证方法,是高精地图开发与仿真场景构建的实用避坑指南。

q9w8e7r6t5的博客 422

vue 移动端和web端实现文件的点击预览 而非下载

kkFileView插件实现预览附件

yyXieDaiMa的博客 2818

CUDA详细安装及环境配置——环境配置指南 – CUDA+cuDNN+PyTorch 安装

本文详细介绍了如何确定显卡支持的CUDA版本、选择对应的cuDNN版本,并逐步安装CUDA、cuDNN和PyTorch。首先,通过命令行输入nvidia-smi.exe查看显卡支持的CUDA版本。接着,根据CUDA版本选择对应的cuDNN版本并下载。然后,从NVIDIA官方网站下载CUDA安装包,按照提示进行安装,并检查是否安装成功。同样地,下载cuDNN安装包,解压后将文件拷贝到CUDA安装目录中,并通过命令行验证安装是否成功。最后,根据PyTorch官网的指引,选择合适的安装命令进行PyTorch的安装

2501_90350274的博客 5098

取消谷歌点击链接下载文件后但却自动将其打开

有时候在运行完导出表格之后,点击链接会在谷歌浏览器下载表格,但是在下载后选中了总是打开此类文件,然后后面在点击链接的时候直接自动打开了,然后只能转存为下载了,那么怎么来解决这个问题呢。

记录个人成长, 分享好用资源 1万+

光伏发电系统模拟及其发电预测开源python工具pvlib

本文介绍光伏发电系统模拟及其发电预测开源python工具pvlib,以及举例介绍获取辐照度方法、光伏发电预测思路。

肖永威的专栏 1万+

GD32单片机引脚复用指南:如何让JTAG接口的PA15/PB3发挥第二功能?

本文详细介绍了GD32F103Cx系列单片机如何通过AFIO模块进行引脚复用,特别是将默认用于JTAG调试接口的PA15、PB3等引脚释放为普通IO或复用功能引脚。文章从原理出发,结合代码实践,讲解了如何配置调试端口重映射,将JTAG引脚安全地转换为GPIO或定时器通道,并提供了常见问题排查与最佳实践,帮助开发者高效利用有限的引脚资源。

nept的博客 808

访问图片服务器中的图片直接显示而不是下载

一句话,换个浏览器直接搞定。 我刚开始用的谷歌,它直接是下载图片的.如图 然后换了个浏览器,我用的QQ浏览器,然后就打开了并且超大

SSLJY_YCFH的博客 2687

Qwen2.5-VL多模态微调超参数深度解析(上):训练流程与优化策略的量化机制分析

上篇文章通过系统化的对比实验,回答了多模态微调中的三个基础问题:“选什么方法”(LoRA/Full/Freeze/OFT对比)、“用什么配置”(60+组超参数组合)、“达到什么效果”(ROUGE-L/BLEU-4指标)。这些结果为后续工作奠定了实验基线,但也留下了更深层的疑问:为何相同方法在不同数据集上表现迥异?为何某些超参数的微小调整会引发性能剧变?如何在未见过的任务上快速找到最优配置?本文是对前文实验数据的二次挖掘与机理解析。我们将关注点从"做了什么实验"转移到"实验揭示了什么规律",实验视角从"结果对

羊城迷鹿的博客 1005

前端文件下载的八种方法(解决pdf、图片在浏览器自动打开问题)

系列文章目录 一、直接使用a标签下载文件(三种方法) 第一种:下载.zip(压缩文件) 第二种:下载.txt(文本文件) 第三种:指定网络地址下载文件 第四种:下载pdf文件(浏览器不自动打开) 二、使用JavaScript(四种方法) 第一种:绑定点击事件 第二种:指定location的href地址 第三种:使用form表单的下载文件 第四种:使用saveAs(url)方法(谷歌、火狐等新浏览器不适用,只支持老的IE6、7、8) 三、使用canvas进行图片下载(防止浏览器自动打开图片) 代码片段如下所示

weixin_46022934的博客 3万+

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

前端下载pdf文档(支持doc/excel/ppt/pdf/jpg、png等)

一、前端有后台返回的各种文档在服务器上的链接地址,实现点击下载文件 1.以a链接点击下载文件列表 <a v-for=“item in tips.filemaintains” :href="${item.filepath}" :download="${item.filename}" @click=“emitEvent(item.event, item)”>{{item.filename}} 使用a标签的download属性来下载文档,其中pdf和图片,谷歌浏览器默认打开,因为有内置pdf浏览器,到

Borage21的博客 2521

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

前端实现PDf文件下载功能

前端实现生成PDF并下载的功能

夏沫之初的博客 2599

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

这将是你看到过最全的pdf预览解决方案

最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如(ie无法直接浏览),最终决定用,这篇文章记录一下我做技术选型的过程。pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 缺点:google的word excel ppt 预览资源,必须是公共可访问的。而且谷歌浏览器上点击就会下载,IE上可以选择是预览还是下载直接通过页面内嵌iframe 此外还可以在iframe标签之间提供一个提示类似这样 ......

qq_42365082的博客 8546

kill-doc 免费文档下载脚本指南:3步把文库页面存成PDF

kill-doc 是一个免费的篡改猴(Tampermonkey)文档下载脚本:打开百度文库、道客巴巴、原创力文档等 33 个以上平台的文档页,按 3 步操作即可把浏览器里已渲染的页面保存为 PDF 或图片压缩包,适合需要留存学习资料、行业标准、办公文档的学生、教师和职场用户。 ## 它是怎么工作的 各文档站的在线预览,本质是把每一页渲染成 canvas 或分页图片展示在浏览器里——你能看到的内

gitblog_00644的博客 214

3个方法突破Google Drive PDF限制:高效下载解决方案

在学术研究和资料整理过程中,用户常遇到Google Drive中"仅查看"权限的PDF文件无法直接下载的问题。本文介绍的Google Drive PDF下载工具通过技术手段实现权限绕过,帮助用户完整保存高质量PDF文档,解决文档保存过程中的权限障碍。 ## 核心优势:重新定义PDF下载体验 本工具与同类解决方案相比,具有三项显著差异: **差异化一:双引擎处理架构** 采用轻量脚本与本地

gitblog_00171的博客 449

html怎么打开本地文件,HTML怎么打开本地文件

2 回答回答:androID 浏览器打开本地HTML文件的方法有些HTML文件放在本地磁盘和sdcard,如何用打开这个网页呢?这种应用在测试时非常有用。有2个方法:1. 使用文件管理器如ES等,需要幸运的是你的文件管理器直接用浏览器打开。2. 在浏览器输入地址访问本地磁盘和SD卡上的HTML,前部分content://com.androID.HTMLfilePRovIDer是ProvIDer的标...

weixin_31423955的博客 1万+

kill-doc文档下载工具终极指南:告别下载限制,一键获取免费文档资源

还在为各种文档网站的下载限制而烦恼吗?kill-doc是一款基于Tampermonkey的用户脚本工具,能够智能绕过百度文库、豆丁网、道客巴巴等主流文档平台的下载限制,实现"所见即所得"的文档下载体验。这款工具通过浏览器渲染技术,将网页中可见的文档内容转换为PDF或图片格式,让你无需注册登录、无需付费订阅,就能轻松下载所需的技术文档、学术资料和电子书籍。 ## 项目价值主张:为什么需要kill-

gitblog_00601的博客 246

如何快速下载Google Drive受保护PDF:终极解决方案指南

你是否曾在Google Drive上发现一份重要的PDF文件,却因为"仅查看"权限而无法下载保存?作为一名学生,小明正在准备毕业论文,他在Google Drive上找到了导师分享的关键参考文献,但每次尝试下载都显示"您没有下载权限"。这种情况不仅影响学习效率,还可能导致重要资料丢失。今天,我将为你介绍一款简单实用的Google Drive PDF下载工具,帮助你轻松突破权限限制,快速获取所需文档。

gitblog_00304的博客 229

三步安装,下载30+平台文档:kill-doc文档下载脚本实战指南

打开百度文库的一份文档,通常要先登录、关广告、连点几个下载按钮,最后只拿到几页。kill-doc 是一款免费的 Tampermonkey 用户脚本,核心能力是:浏览器能渲染出多少文档页,它就按顺序保存多少,输出 PDF、图片压缩包或纯文本三种形态,操作集中在页面右侧的按钮面板上。 ## 📦 安装步骤:三分钟跑起来 这一节解决"脚本怎么进浏览器"的问题,两种方式任选其一。 1. 安装 Tam

gitblog_00789的博客 160

谷歌浏览器插件开发:集成Youtu-Parsing实现网页文档一键解析

本文介绍了如何开发一款集成Youtu-Parsing多模态文档智能解析模型的谷歌浏览器插件,实现网页文档一键解析。借助星图GPU平台,开发者可自动化部署该镜像,快速搭建后端解析服务。该插件能将网页中的PDF或图片文档自动解析为可编辑文本,极大地提升了在线资料查阅和内容提取的效率。

weixin_42577735的博客 95

kill-doc安装与配置教程:5分钟快速上手最强文档下载工具

kill-doc是一款免费的文档下载工具,能够帮助用户轻松下载百度文库、豆丁网、道客巴巴等多个平台的免费文档,自动绕过广告和登录验证,极大提升文档获取效率。 ## 🌟 为什么选择kill-doc? 面对各种文档下载网站的广告弹窗、登录要求和复杂操作,kill-doc提供了一站式解决方案: - **全自动操作**:无需手动点击,脚本自动完成预览和下载 - **多平台支持**:覆盖百度文库、豆丁

gitblog_00470的博客 460

a 标签 、el-link 与 file-saver.js 下载文件

--使用edge浏览器(版本:122): docx,xlsx格式 会新启空白窗口,接着浏览器打开预览-顶部有提示下载按钮,其他可以下载,下载后打开无异常。测试文件:.png,.jpg,.txt,.doc,.docx,.zip,.pdf,.xlsx,.mp4。--使用苹果自带浏览器:xlxs格式 会多空白页-提示不安全文件是否保存下载,其他格式可以正常下载,下载后可打开。测试文件:.png,.jpg,.txt,.doc,.docx,.zip,.pdf,.xlsx,.mp4。

sun_jinlin的博客 1006
上一篇: java日期格式化字符串,大小写区别,YYYY与yyyy,MM与mm,HH与hh
下一篇: tomcat相关技术
snakeflash
博客等级 码龄9年 25粉丝 39原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值