前端根据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});
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/764271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Azure databricks spark overwrite 全量更新的时候容易碰到的问题

原因&#xff1a;Azure databricks spark overwrite 全量ADS层表更新的时候容易碰到的问题正在写入结果有服务请求这个表的数据那如何避免呢&#xff1f; 1、 databricks spark overwrite 到的的时候会先TRUNCATE TABLE 然后再写入&#xff0c;就会碰到查询是空的情况&#xff…

Prompt进阶系列4:LangGPT(构建高性能Prompt实践指南)--结构化Prompt

Prompt进阶系列4:LangGPT(构建高性能Prompt实践指南)–结构化Prompt 1.结构化 Prompt简介 结构化的思想很普遍&#xff0c;结构化内容也很普遍&#xff0c;我们日常写作的文章&#xff0c;看到的书籍都在使用标题、子标题、段落、句子等语法结构。结构化 Prompt 的思想通俗点…

从零开始学Spring Boot系列-集成Kafka

Kafka简介 Apache Kafka是一个开源的分布式流处理平台&#xff0c;由LinkedIn公司开发和维护&#xff0c;后来捐赠给了Apache软件基金会。Kafka主要用于构建实时数据管道和流应用。它类似于一个分布式、高吞吐量的发布-订阅消息系统&#xff0c;可以处理消费者网站的所有动作流…

[音视频学习笔记]七、自制音视频播放器Part2 - VS + Qt +FFmpeg 写一个简单的视频播放器

前言 话不多说&#xff0c;重走霄骅登神路 前一篇文章 [音视频学习笔记]六、自制音视频播放器Part1 -新版本ffmpeg&#xff0c;Qt VS2022&#xff0c;都什么年代了还在写传统播放器&#xff1f; 本文相关代码仓库&#xff1a; MediaPlay-FFmpeg - Public 转载雷神的两个流程…

常用的IDE推荐

程序员在选择集成开发环境&#xff08;IDE&#xff09;时&#xff0c;会考虑多种因素&#xff0c;包括易用性、功能丰富性、性能以及是否支持他们正在使用的编程语言。以下是一些建议的IDE及其优点&#xff1a; 1.JetBrains PyCharm&#xff1a;专为Python开发而设计的IDE。 优…

Flutter动画(一)Ticker、Animate 原理

在任何系统的UI框架中&#xff0c;动画原理都是类似的&#xff0c;即&#xff1a;在一段时间内&#xff0c;快速地多次改变UI外观&#xff1b;由于人眼会产生视觉暂留&#xff0c;所以最终看到的就是一个“连续”的动画。 Flutter中对动画进行了抽象&#xff0c;主要涉及 Anim…

ubuntu生成 设置 core文件

ubuntu生成&设置core文件&#xff0c;调试段错误_ubuntu生成core文件-CSDN博客 ubuntu设置core文件_ubuntu core文件默认位置-CSDN博客 ulimit -a sudo vim /etc/profile #或者 vi ~/.bashrc ulimit -c unlimited #添加&#xff0c; 退出source /etc/profile sudo…

100个python代码(三)

列表排序: pythonCopy code my_list [3, 1, 4, 1, 5, 9, 2] my_list.sort() 生成器表达式: pythonCopy code gen_exp (x**2 for x in range(10)) for x in gen_exp: print(x) 字典推导式: pythonCopy code square_dict {x: x**2 for x in range(5)} 集合推导式: p…

后端前行Vue之路(一):初识Vue

1.Vue是什么 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。另一方…

Redis系列学习文章分享---第十四篇(Redis多级缓存--封装Http请求+向tomcat发送http请求+根据商品id对tomcat集群负载均衡)

目录 Redis的实战篇-多级缓存1-多级缓存-怎么封装Http请求工具&#xff1f;示例代码 2-多级缓存-怎么向tomcat发送http请求&#xff1f;示例代码 3-多级缓存-怎么根据商品id对tomcat集群负载均衡&#xff1f;4-多级缓存-Redis缓存预热怎么做&#xff1f;示例代码 5-多级缓存-怎…

智能教育系统中大模型的应用及其对学习效果的影响

1. 背景介绍 随着人工智能技术的飞速发展&#xff0c;大模型在各个领域都取得了显著的成果。在教育领域&#xff0c;智能教育系统中的大模型应用也日益受到关注。本文将探讨智能教育系统中大模型的应用及其对学习效果的影响。 2. 核心概念与联系 2.1 智能教育系统 智能教育…

如何用pytorch调用预训练Swin Transformer中的一个Swin block模块

1&#xff0c;首先&#xff0c;我们需要知道的是&#xff0c;想要调用预训练的Swin Transformer模型&#xff0c;必须要安装pytorch2&#xff0c;因为pytorch1对应的torchvision中不包含Swin Transformer。 2&#xff0c;pytorch2调用预训练模型时&#xff0c;不建议使用pretr…

【python】python3基础

文章目录 一、安装pycharm 二、输入输出输出 print()文件输出&#xff1a;格式化输出&#xff1a; 输入input注释 三、编码规范四、变量保留字变量 五、数据类型数字类型整数浮点数复数 字符串类型布尔类型序列结构序列属性列表list &#xff0c;有序多维列表列表推导式 元组tu…

std::thread使用及实现原理精讲(全)

C进阶专栏&#xff1a;http://t.csdnimg.cn/HGkeZ 相关系列文章&#xff1a; std::thread使用及实现原理精讲(全) 有了std::thread&#xff0c;为什么还需要引入std::jthread&#xff1f; 目录 1.windows创建线程 2.linux创建线程 3._beginthread小融合 4.CreateThread与_…

基于python+vue网络相册设计与实现flask-django-nodejs-php

网络相册设计与实现的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品&#xff0c;体验高科技时代带给人们的方便&#xff0c;同时也能让用户体会到与以往常规产品不同的体验风格。 与安卓&#xff0c;iOS相比较起来&#xff0…

构造函数(原型和原型链)

原型和原型链 今日目标&#xff1a;原型和原型链是高频面试题 1.原型 2.原型链 要求&#xff1a;清晰的说出来原型和原型链的概念和特性。并能手绘原型和原型链图 3.swiper轮播图插件的使用 00-回顾 # 面向过程&#xff1a; 概念&#xff1a; 根据流程步骤一步步实现特定…

CentOS/RHEL 6.5 上 NFS mount 挂起kernel bug

我本身有四台机器做WAS集群&#xff0c;挂载nfs&#xff0c;其中随机一台客户端计算机端口关闭释放将进入不良状态&#xff0c;对 NFSv4 挂载的任何访问都将挂起&#xff08;例如“ls&#xff0c;cd 或者df均挂起”&#xff09;。这意味着没有人并且所有需要访问共享的用户进程…

久菜盒子|留学|推荐信|专业课老师|结构抗震设计

在众多学生当中&#xff0c;10这名学生给我留下了更深的印象&#xff0c;她对学习的认真态度、一丝不苟的精神&#xff0c;都让我感受到她的与众不同。因此&#xff0c;作为我校土木工程学院的前院长&#xff0c;我对于 10 申请贵校表示支持并毫无保留的推荐这位学生。 在结构抗…

深度学习图像处理02:Tensor数据类型

上一讲深度学习图像处理01&#xff1a;图像的本质&#xff0c;我们了解到图像处理的本质是对矩阵的操作。这一讲&#xff0c;我们讲介绍深度学习图像处理的基本数据类型&#xff1a;Tensor类型。 在深度学习领域&#xff0c;Tensor是一种核心的数据结构&#xff0c;用于表示和…

复旦大学MBA:iLab项目探寻科技创新 助力企业出海

2024年2月底&#xff0c;新一轮复旦MBA iLab商业咨询项目&#xff08;以下简称iLab项目&#xff09;正式拉开序幕。      科创大时代&#xff0c;如何于变局中创新突破、绘就商业“蓝图”&#xff1f;怎样把握ESG投资机遇&#xff0c;创造可持续发展的未来&#xff1f;如何…