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

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

js 复制代码
/**
   * 文件链接转文件流下载--主要针对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();
   }
  }
js 复制代码
/**
 *下载导出文件
 * @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对象
  }

}
js 复制代码
/**
 * 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的头,并转化为byte
  let bytes = window.atob(arr[1]);
  // 处理异常,将ascii码小于0的转换为大于0
  let 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
  });
}
相关推荐
扶风ff2 小时前
新品知识更新太快?用练题簿在线刷题,安排企业培训的小测与复盘
前端·学习·小程序
对空六课2 小时前
支持注意力分析的热力图工具有哪些?
前端·数据库·数据分析
Csvn4 小时前
Vue3 响应式与编译:依赖收集如何升级为节点级靶向更新
前端
码林拾遗WJ4 小时前
学术 PDF 翻译工作流:从乱码到双语对照的实战记录
pdf
星栈5 小时前
pnpm 12 升级实测
前端·javascript
Sirens.5 小时前
Java并发锁详解:六类锁策略与 synchronized 底层原理
java·前端·算法
Ai-_Man5 小时前
您您这可以把Microsofat Copilot的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑·copilot
特创数字科技6 小时前
一个纯本地运行的图片处理工具:压缩 / 裁剪 / 九宫格 / 圆角 / 滤镜 / 拼图 / 水印,终生使用
前端
IT_陈寒7 小时前
Vue的v-if和v-for混用居然是个天坑
前端·人工智能·后端
天衍四九-7 小时前
【无标题】
前端·spring boot·mysql·nginx·docker