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页打开了

LLM and Embedding区别 LLM(大语言模型)和 Embedding(嵌入)是自然语言处理(NLP)中的两个核心概念,它们的核心区别在于。Embedding 计算向量。 阅读详情

相关推荐

RISC-V— 架构基础知识学习

蜂鸟 E200 系列是一个开源的RISC-V 处理器。蜂鸟 E200 系列由中国大陆研发团队开发,用户能够轻松与开发人员取得交流和支持。RI蜂鸟 E200 处理器研发团队拥有在国际一流公司多年开发处理器的经验,使用稳健的Verilog 2001 语法编写的可综合 RTL 代码,以工业级标准进行开发。蜂鸟 E200 的代码为人工编写,添加丰富的注释且可读性强,非常易于理解。

deilt 1万+

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

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

Leon4055的博客 3969

VLM,VLA,VLN的区别与联系

VLM 提供了理解世界的“眼睛和大脑”,VLN 赋予了这个智能体在空间中“移动的双腿”,而 VLA 则进一步赋予了它“灵巧的双手”来改变世界。三者共同构成了一个完整具身智能体的核心能力模块。

l0409044222的博客 1311

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

【WB32库开发】第9章 TIM1高级定时器——输出多路PWM

PWM(Pulse Width Modulation)意为脉冲宽度调制,简称脉宽调制 。在工控行业,PWM信号可以用来调节电机转速、调节变频器以及BLDC电机驱动等;在LED照明行业,可以通过PWM来控制LED的亮暗变化;还可以通过PWM信号来控制无源蜂鸣器发出简单的声音等。 WB32也可输出PWM,需配置WB32上的定时器。 在WB32中有4个定时器,其中TIM1为高级定时器,TIMx(2-4)为通用定时器,这四个定时器均挂载在APB1总线上,每个定时器都可以输出4路PWM。 本章需要使用固件库TIM例程

北海村夫的博客 4637

Figure 03人形机器人与Helix端到端控制系统:具身智能突破深度解析

2026年5月,Figure AI的Figure 03人形机器人在一场震撼业界的直播中完成了长达200小时的连续全自动作业,分拣近25万个包裹,零故障。这一里程碑式的成就标志着人形机器人正式从「实验室展示」迈入「规模化商用」阶段。本文深入剖析Figure 03的核心技术——Helix端到端神经网络控制系统,包括System 0/1/2三层架构、视觉运动策略、全身协同控制等关键技术,并提供完整的Python/Go代码示例,帮助开发者理解具身智能的核心原理与实现路径。关键词。

shao.bing的专栏 992

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

kkFileView插件实现预览附件

yyXieDaiMa的博客 2818

【FISCO-BCOS】 八、ubuntu配置Java环境

ubuntu配置Java环境需根据自己的java版本号进行细节修改,本文以jdk11.0.18版本为例。ps:通过此法还可以查看java安装路径,但必须是环境配置成功的情况下才能使用。二、添加Java环境路径。四、检查java环境设置。

naihe_fish的博客 4309

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

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

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

Apache DolphinScheduler 实现了对 OceanBase 的元数据库支持

Apache DolphinScheduler 是一款开源的分布式工作流任务调度系统,它提供了可视化的工作流设计和调度功能,支持大数据任务的自动化调度和监控。最近的更新中,Apache DolphinScheduler 引入了对 OceanBase 数据库的元数据库支持,这为用户在大数据环境中管理和调度任务提供了更多选择。用户可以通过 DolphinScheduler 提供的可视化界面进行工作流的设计和调度,也可以通过 DolphinScheduler 提供的 API 进行任务的编程调度。

VavzNvml的博客 495

基于YOLOv11的气象目标检测系统:台风眼与钩状回波检测

气象目标检测是计算机视觉在气象领域的重要应用,对台风预警和强对流天气监测具有重要意义。本文详细介绍了一种基于YOLOv11的气象目标检测系统,能够有效识别卫星云图中的台风眼和雷达图中的钩状回波。系统包含完整的数据处理流程、模型训练策略以及用户友好的Web界面。我们使用了公开的气象数据集进行训练和验证,并提供了完整的实现代码。实验结果表明,本系统在气象目标检测任务中达到了较高的准确率和实用性。关键词:气象目标检测;YOLOv11;台风眼检测;钩状回波;深度学习;计算机视觉台风眼检测数据集。

YOLO 473

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

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

SSLJY_YCFH的博客 2687

第7次CCF PTA编程培训师资认证-T1 真题解析(2024下)

B。

lan_in的博客 513

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

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

weixin_46022934的博客 3万+

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

前端下载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

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

前端实现PDf文件下载功能

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

夏沫之初的博客 2599

这将是你看到过最全的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

突破Google Drive限制:如何有效保存无权限访问的PDF文档

在日常工作与学习中,我们时常会遇到这样的情况:在Google Drive中发现重要的PDF资料,却因权限设置无法直接下载。这种情况下,是否存在一种安全可靠的PDF下载工具来解决这个问题?本文将从问题根源出发,探索两种技术方案的实现原理,提供详细的实践路径,并拓展相关使用技巧与安全规范。 ## 问题解析:为何Google Drive文档无法直接保存 当我们遇到"仅查看"权限的Google Dri

gitblog_00033的博客 353
上一篇: 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、付费专栏及课程。

余额充值