首页 > 其他分享 >js 下载流调用浏览器预览 的方法

js 下载流调用浏览器预览 的方法

时间:2023-08-26 14:44:27浏览次数:30  
标签:const suffix 预览 filename let 浏览器 js type

//文件预览js 下载流调用浏览器预览 的方法
var $viewblob=function (url, data) {
  const config = { responseType: 'blob', timeout: 9999999 };
  $http(url,data,config).then(res => {
    const fileRes =res;
    let type = { type: 'application/octet-stream' };
    const types = {
        pdf: { type: 'application/pdf' },
        png: { type: 'image/png' },
        jpg: { type: 'image/jpeg' },
    }

    let contentDisposition = res.headers["content-disposition"]||"filename=未知文件";
    let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
    let result = patt.exec(contentDisposition);
    const filename =  decodeURI(contentDisposition).split('=')[1].replace('\'','').replace('"','');

    if (filename) {
        const suffix = filename.substring(filename.lastIndexOf('.') + 1).toLocaleLowerCase();
        if (types[suffix]) { //预览
            type = types[suffix];
            //其他下载 octet-stream
        }
    }

    let viewurl= window.URL && window.URL.createObjectURL(new Blob([fileRes.blob], type));
    if(viewurl){
      window.open(viewurl)
    }
  })
}

标签:const,suffix,预览,filename,let,浏览器,js,type
From: https://www.cnblogs.com/7c89/p/17658790.html

相关文章

  • 报错ValueError: Can't find 'adapter_config.json'
    前言在做组内2030项目时,我具体做的一个工作是对大模型进行LoRA微调,在整个过程中有许多坑,其中有些值得记录的问题,于是便产生了这篇博客。问题我在得到微调好的模型后,需要对模型进行性能测评。在加载模型时,遇到如下报错ValueError:Can'tfind'adapter_config.json'补充:报错......
  • 深入了解Webpack:特性、特点和结合JS混淆加密的实例
    Webpack是现代前端开发中最受欢迎的构建工具之一,其强大的特性和灵活性使得开发者能够更有效地管理和优化项目资源。在本文中,我们将深入探讨Webpack的特性和特点,并结合实例演示如何使用Webpack与JS混淆加密相结合。Webpack的特性和特点1.模块化管理Webpack支持将项目拆分为多个模块......
  • 复制浏览器内的文字之后出现方框符号的解决方法
      本文介绍在复制网页内容后粘贴时,粘贴内容出现一个方框图案而不是当初复制内容的解决办法。  最近,需要将谷歌地球引擎(GoogleEarthEngine,GEE)网页中的一段代码复制到另一个网页中,却发现复制、粘贴后得到的是一个白色的矩形空白格。  我们举个例子,来展示一下具体的情况——......
  • SQLite 3.43 发布,JSON 处理性能提升 2 倍
    SQLite3.43发布,JSON处理性能提升2倍来源:OSCHINA编辑: 局2023-08-2516:58:59 38月26日「源创会」北京站,聊聊AI大模型与底层技术>>> SQLite3.43已正式发布。SQLite是一个C语言库,实现了一个小型、快速、独立、高可靠性、全功能的SQL数据库......
  • js对象操作(object)
    声明对象varcan_args=newObject();对象赋值can_args={"vue":300,"jquery":200……};对象动态赋值(新建属性值)第一种:letkey="id";letvalue=2can_args[key]=value;console.error(can_args);//{"vue":300,"jquery":200,......
  • 大屏读取本地文件-js读取csv文件之FileReader
    <script>functionreadCsv(){constfile=document.getElementById('uploadFile').files[0];if(file.type!="text/csv"){alert("文件类型错误");return;}varreader=newFileReade......
  • axios.js的使用方法
    axios是一个基于Promise的HTTP客户端,可以用于浏览器和Node.js中。以下是axios的基本使用方法: 1.安装axios模块: ```npminstallaxios``` 2.引入axios模块: ```javascriptconstaxios=require('axios');``` 3.发送GET请求: ```javascriptaxios.get('/api......
  • danfo.js的使用方法
    danfo.js是一个轻量级的JavaScript库,用于处理和分析数据。下面是danfo.js的使用方法及其详细参数说明: 1.安装danfo.js ```bashnpminstalldanfojs``` 2.引入danfo.js ```javascriptconstdanfo=require('danfojs');``` 3.创建一个数据数组 ```......
  • flexible.js 自动计算font-size
    flexible.js?flexible.js是手淘开发出的一个用来适配移动端的js框架。手淘框架的核心原理就是根据制不同的width给网页中html根节点设置不同的font-size,然后所有的px都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了。其实它就是一个终端设备适配的解决方案,也就是说它......
  • JS打印
    我们通过前端上传到数据库的pdf或者word文档,当我们在线观看时,希望使用调用本地的打印进行实时打印;当然可能会涉及到安全问题,有需要的小伙伴,可以自行查阅。//打印类属性、方法定义/*eslint-disable*///ActiveXObject是window自带的打印类,也就是所谓的控件functionisIE......