当前位置: 首页 > news >正文

前端根据pdf连接点击下载pdf而不是直接打开

参考地址: https://www.cnblogs.com/jackson-yqj/p/11321275.html

/*** 文件链接转文件流下载--主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题* @param url  :文件链接* @param fileName  :文件名;* @param type  :文件类型;*/function fileLinkToStreamDownload(url, fileName, type) {let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;if (!reg.test(url)) {throw new Error("传入参数不合法,不是标准的文件链接");} else {let xhr = new XMLHttpRequest();xhr.open('get', url, true);xhr.setRequestHeader('Content-Type', `application/${type}`);xhr.responseType = "blob";xhr.onload = function () {if (this.status == 200) {//接受二进制文件流var blob = this.response;downloadExportFile(blob, fileName, type)}}xhr.send();}}
/***下载导出文件* @param blob  :返回数据的blob对象或链接* @param tagFileName  :下载后文件名标记* @param fileType  :文件类 word(docx) excel(xlsx) ppt等*/
function downloadExportFile(blob, tagFileName, fileType) {let downloadElement = document.createElement('a');let href = blob;if (typeof blob == 'string') {downloadElement.target = '_blank';} else {href = window.URL.createObjectURL(blob); //创建下载的链接}downloadElement.href = href;downloadElement.download = tagFileName + moment(new Date().getTime()).format('YYYYMMDDhhmmss') + '.' + fileType; //下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素if (typeof blob != 'string') {window.URL.revokeObjectURL(href); //释放掉blob对象}}
/*** base64对象转文件对象* @param urlData  :数据的base64对象* @param type  :类型 image/png;* @returns {Blob}:Blob文件对象*/
function base64ToBlob(urlData, type) {let arr = urlData.split(',');let array = arr[0].match(/:(.*?);/)let mime = (array && array.length > 1 ? array[1] : type) || type;// 去掉url的头,并转化为bytelet bytes = window.atob(arr[1]);// 处理异常,将ascii码小于0的转换为大于0let ab = new ArrayBuffer(bytes.length);// 生成视图(直接针对内存):8位无符号整数,长度1个字节let ia = new Uint8Array(ab);for (let i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}return new Blob([ab], {type: mime});
}

相关文章:

前端根据pdf连接点击下载pdf而不是直接打开

参考地址: https://www.cnblogs.com/jackson-yqj/p/11321275.html /*** 文件链接转文件流下载--主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题* param url &#xff1a;文件链接* param fileName &#xff1a;文件名;* param type &#xff1a;文件类型;*/functio…...

pytorch中的gather函数的定义和作用是什么?

在PyTorch中&#xff0c;gather函数是一个用于从张量&#xff08;tensor&#xff09;中收集特定索引位置上的元素的函数。它主要用于高级索引和从张量中提取特定信息。 定义&#xff08;python&#xff09; gather函数的基本定义如下&#xff1a; torch.gather(input, dim, i…...

[ABC206E] Divide Both 解题记录

[ABC206E] Divide Both 解题记录 题意简述 给定整数 L , R L,R L,R&#xff0c;求满足以下条件的数对 ( x , y ) (x,y) (x,y) 的数量。 x , y x,y x,y 不互质 x ∤ y x \nmid y x∤y 且 y ∤ x y \nmid x y∤x 题目分析 正难则反&#xff0c;考虑用所有的满足第一条性质的…...

常见的服务器技术和服务器技术的重要性

服务器技术是指一系列用于构建、维护和管理服务器的技术和工具&#xff0c;旨在确保服务器能够高效、稳定、安全地运行&#xff0c;以满足客户端的请求并提供各种服务。它涵盖了服务器硬件、操作系统、网络协议、数据存储和安全等多个方面的知识和技能。今天&#xff0c;德迅云…...

MATLAB中的数学建模:基础知识、实例与方法论

前言 在当今科技高速发展的时代&#xff0c;数学建模成为了解析复杂世界的关键工具&#xff0c;而MATLAB作为一种专业的科学计算软件&#xff0c;为我们提供了强大的数学建模平台。MATLAB不仅仅是Matrix Laboratory的简称&#xff0c;更是一个集数值分析、矩阵计算、算法开发和…...

Flutter与Xamarin跨平台APP开发框架的区别

嘿&#xff0c;各位亲爱的朋友们&#xff01;大家好&#xff0c;我是咕噜铁蛋&#xff01;今天我们要探讨的话题是&#xff1a;Flutter与Xamarin这两款热门的跨平台APP开发框架。我深知选择合适的开发工具对于开发者来说有多么重要。那么&#xff0c;当我们需要开发跨平台应用时…...

【JAVA】Springboot集成Proguard完成jar包混淆

目录 一、需求背景 二、具体实现 一、需求背景 某些情况下需要将jar包交付给第三方&#xff0c;担心第三方会将代码进行反编译&#xff0c;故需要将jar包进行处理。 jar包源码混淆工具有多种&#xff0c;但真正能投入使用的产品并不多。 比如 ClassFinal (ClassFinal: Jav…...

全流程ArcGIS Pro技术应用

GIS是利用电子计算机及其外部设备&#xff0c;采集、存储、分析和描述整个或部分地球表面与空间信息系统。简单地讲&#xff0c;它是在一定的地域内&#xff0c;将地理空间信息和 一些与该地域地理信息相关的属性信息结合起来&#xff0c;达到对地理和属性信息的综合管理。GIS的…...

4.windows ubuntu 子系统:微生物宏基因组测序和分析流程概括。

微生物宏基因组测序和分析流程大致可以分为以下几个步骤&#xff1a; DNA提取&#xff1a;需要从微生物样本中提取DNA。2.建库构建&#xff1a;提取到的DNA需要进行建库构建&#xff0c;包括DNA片段的断裂、末端修复、连接连接适配器等操作。3.高通量测序&#xff1a;建库构建完…...

S2-066分析与复现

Foreword 自struts2官方纰漏S2-066漏洞已经有一段时间&#xff0c;期间断断续续地写&#xff0c;直到最近才完成&#xff0c;o(╥﹏╥)o。羞愧地回顾一下官方通告&#xff1a; 2023.12.9发布&#xff0c;编号CVE-2023-50164&#xff0c;主要影响版本是 2.5.0-2.5.32 以及 6.0.…...

让天下没有难学的大模型!我整理一份大模型技术知识图谱!

最近陆续有一些同学反馈&#xff0c;感觉大模型知识点太多了&#xff0c;找不到头绪。 今天我整理一份大模型技术以及应用的知识图谱&#xff0c;让大家轻松学习大模型&#xff0c;喜欢点赞、收藏、关注。 另外&#xff0c;技术交流可以文末加入我们。 大模型的预训练技术 …...

大屏动效合集更更更之实现百分比环形

实现效果 参考链接&#xff1a; https://pslkzs.com/demo/pie/demo1.php 写在最后&#x1f352; 源码&#xff0c;关注&#x1f365;苏苏的bug&#xff0c;&#x1f361;苏苏的github&#xff0c;&#x1f36a;苏苏的码云...

基于springboot的反诈宣传平台

技术&#xff1a;springbootmysqlvue 一、系统背景 反欺诈平台可以对公交信息进行集中管理&#xff0c;可以真正避免传统管理的缺陷。反欺诈平台是一款运用软件开发技术设计实现的应用系统&#xff0c;在信息处理上可以达到快速的目的&#xff0c;不管是针对数据添加&#xff…...

面试算法-82-不同路径

题目 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#xff1f; …...

阿里云ECS经济型e实例,2核2G配置、3M固定带宽和40G ESSD Entry系统盘

阿里云服务器99元一年配置为云服务器ECS经济型e实例&#xff0c;2核2G配置、3M固定带宽和40G ESSD Entry系统盘&#xff0c;新用户和老用户均可买&#xff0c;续费不涨价依旧是99元一年&#xff0c;阿里云服务器网aliyunfuwuqi.com来详细说下阿里云99元服务器性能测评&#xff…...

Java基础知识总结(13)

数据结构 链表 优点&#xff1a;随机增删元素效率高&#xff08;因为增删元素不涉及到大量元素的位移&#xff09; 缺点&#xff1a;查询效率较低&#xff0c;每一次查找某个元素的时候都需要从头结点开始往下遍历 LinkedList集合 /* 链表的优点&#xff1a; 由于链表的元…...

杰发科技AC7801——Keil编译的Hex大小如何计算

编译结果是Keil里面前三个数据的总和&#xff1a; 即CodeRoDataRWData的总和。 通过ATCLinkTool工具查看内存&#xff0c;发现最后一个字节正好是5328 注意读内存数据时候需要强转成32位&#xff0c;加1000的 增加1024的地址只需要加256即可...

opengl 学习(六)-----坐标系统与摄像机

坐标系统与摄像机 分类引言坐标系统摄像机教程在CMake中使用全局定义预编译宏,来控制是否开启错误检查补充 分类 opengl c 引言 OpenGL希望在每次顶点着色器运行后&#xff0c;我们可见的所有顶点都为标准化设备坐标(Normalized Device Coordinate, NDC)。也就是说&#xff…...

分库分表场景下多维查询解决方案(用户+商户)

在采用分库分表设计时&#xff0c;通过一个PartitionKey根据散列策略将数据分散到不同的库表中&#xff0c;从而有效降低海量数据下C端访问数据库的压力。这种方式可以缓解单一数据库的压力&#xff0c;提升了吞吐量&#xff0c;但同时也带来了新的问题。对于B端商户而言&#…...

vue学习日记14:工程化开发脚手架Vue CLI

一、概念 二、安装 1.全局安装&查看版本 注意启动cmd输入命令 要以管理员运行哦 安装了一次就行以后不用再创建了 yarn global addvue/cli vue --version 显示了版本号即可 2.创建项目架子 创建项目的路径在哪 项目就在哪 项目名字不能用中文 vue create project-n…...

生成式AI的版权之困:我们训练模型,谁拥有产出?

在人工智能技术飞速发展的今天&#xff0c;生成式AI已成为各行各业的核心工具。它能够自动生成文本、代码、图像甚至视频&#xff0c;极大提升了生产效率。然而&#xff0c;随之而来的版权归属问题却引发了广泛争议。对于软件测试从业者而言&#xff0c;这不仅是法律挑战&#…...

深度解析:ComfyUI-Manager节点冲突检测的5种技术解决方案与架构设计

深度解析&#xff1a;ComfyUI-Manager节点冲突检测的5种技术解决方案与架构设计 【免费下载链接】ComfyUI-Manager ComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable …...

HTML5中Mediastream实现摄像头画面实时捕获

HTML5通过MediaStream API可直接调用摄像头&#xff1a;先用navigator.mediaDevices.getUserMedia({video:true})获取流并赋给video.srcObject&#xff0c;再用canvas逐帧绘制处理&#xff1b;需处理权限异常、复用流、设置约束参数&#xff0c;并注意HTTPS和移动端autoplay/mu…...

告别网络依赖:HY-MT1.5-1.8B离线翻译模型保姆级手机端部署指南

告别网络依赖&#xff1a;HY-MT1.5-1.8B离线翻译模型保姆级手机端部署指南 1. 引言 在移动互联网时代&#xff0c;语言障碍仍然是全球交流的主要壁垒之一。传统翻译工具依赖云端服务&#xff0c;不仅需要稳定的网络连接&#xff0c;还存在隐私泄露风险。腾讯混元团队于2025年…...

告别复杂配置!OFA图像描述镜像实测:Supervisor自动管理,Web界面直接上手

告别复杂配置&#xff01;OFA图像描述镜像实测&#xff1a;Supervisor自动管理&#xff0c;Web界面直接上手 1. 为什么选择这个镜像&#xff1f; 在AI模型部署的世界里&#xff0c;配置环境往往是最大的拦路虎。传统部署方式需要&#xff1a; 安装Python环境解决依赖冲突手动…...

高温高压蒸汽测量|涡街蒸汽流量计选型干货

涡街蒸汽流量计广泛应用于电厂、化工、热电联产等核心工业场景&#xff0c;科学选型涡街蒸汽流量计&#xff0c;是保障高温高压蒸汽计量精准、运维高效的核心前提。高温高压蒸汽工况下&#xff0c;涡街流量计选型需紧扣 4 大核心干货要点&#xff0c;规避选型误区&#xff1a;匹…...

AutoGen Studio步骤详解:Qwen3-4B在AssiantAgent中Base URL与模型绑定

AutoGen Studio步骤详解&#xff1a;Qwen3-4B在AssiantAgent中Base URL与模型绑定 1. 了解AutoGen Studio与Qwen3-4B模型 AutoGen Studio是一个低代码界面&#xff0c;专门帮助开发者快速构建AI代理应用。通过这个平台&#xff0c;你可以轻松创建AI代理、为它们添加工具功能、…...

Axure疑难杂症:订单管理页的Axure高阶技巧:动态数据绑定与条件逻辑优化

案例 亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!如有帮助请订阅专栏! Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 案例视频: 中继器嵌套、动态面板嵌套、订单页面 案例展示: 订单管理需求分析: 页面组成应包…...

腕带硬件选型方案

一、核心处理器选型 二、心率与血氧检测模块选型 2.1 选型方案:JFC103 2.1.1 发光源 1. 绿色 功能:心率测量与脉搏波形(心律波形) 采集。 原因:绿光穿透表皮后,被血液吸收的程度会随心脏搏动而周期性变化。相比红光,绿光在皮肤浅层对血流灌注变化的敏感度最高,信噪比…...

文本三剑客命令手册

文本三剑客命令手册(grep、sed、awk) 一、grep — 文本搜索利器 基本语法 grep [选项] 模式 文件名常用选项 选项 说明 -i 忽略大小写 -v 反向匹配(显示不匹配的行) -n 显示匹配行的行号 -c 统计匹配行数 -l 只显示包含匹配的文件名 -L 只显示不包含匹配的文件名 -r / -R 递…...