浏览器中利用js打包下载所有类型文件
浏览器中利用js打包下载所有类型文件
- 概述
- ajax请求方式打包下载所有类型文件
- canvas渲染方式打包下载所有图片
- 相关知识
- 作者
概述
需求：1.项目中在浏览器中点击按钮后根据多个url地址下载多个文件(可能是多个图片，也可能是多种类型文件如pdf excel 图片 压缩文件任意类型等)，而且是这些文件一起压缩成一个压缩包一起下载利用这个demo就可以实现了。2.若浏览器之前加载过就会从缓存中下载不会再次耗费流量下载了，而且这种方式不需要经过服务器打包压缩而是直接从浏览器下载好后打包压缩的，例如阿里云oos上的文件可以直接通过浏览器打包下载不需要再次经过服务器打包下载了，因此这样的效率和速度都是很快的。
ajax请求方式打包下载所有类型文件
采用XMLHttpRequest ajax请求方式好处是：
1.能下载任意类型文件。2.如果浏览器之前缓存过，可以从缓存里面直接加载图片。名字可以根据数组一一对应，网上方法一般不能对应名字。3.自定义下载错误类型文本提示
下载地址：ajax请求方式打包下载所有类型文件源码
canvas渲染方式打包下载所有图片
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script><script src="https://cdn.bootcss.com/jszip/3.2.1/jszip.js"></script><script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script></head><body><h2>采用canvas渲染方式好处是：不用再进行设置跨域设置了，服务器还是需要的。如果浏览器之前缓存过，可以从缓存里面直接加载图片。名字可以根据数组一一对应，网上方法一般不能对应名字。缺点是只能下载图片类型。<!-- QQ1092413979 --></h2><h2 id="tipId"></h2></body><script>var imagesUrl=["https://hx-pro.oss-cn-hangzhou.aliyuncs.com/68bb0ac4-af6e-41fa-9a91-462f128c82b5.jpg","https://hx-pro.oss-cn-hangzhou.aliyuncs.com/48ccd15f-c12f-4346-b761-048b6f564fce.png"];var imagesNames=["小老头.jpg","表情图.png"];var saveAsName="xx的照片信息";//保存后的文件信息var progressTipId="tipId";//packageImages();function packageImages() {var folderName = saveAsName; //保存后的文件信息var tipInfoId=progressTipId;//提示的进度信息$('#' + tipInfoId).text('下载中,请稍等......');var imgUrls = imagesUrl;//config.initialPreview;//下载地址var imgsSrc = [];var imgBase64 = [];var imageSuffix = []; //图片后缀var zip = new JSZip();//zip.file("readme.txt", "案件详情资料\n");var img = zip.folder(folderName);for (var i = 0; i < imgUrls.length; i++) {var src = imgUrls[i];var suffix = src.substring(src.lastIndexOf("."));imageSuffix.push(suffix);src = src ; //避免从浏览器缓存加载，导致失败+ "?x-oss-process=image/resize,m_lfit,h_1124,w_860&ran="+ Math.random()getBase64(src, i).then(function(data) {var imgBase64Obj = {index: data.index,val: data.val.substring(22)};imgBase64.push(imgBase64Obj);//console.log(base64);//处理成功打印在控制台}, function(err) {console.log(err); //打印异常信息});}function tt() {setTimeout(function() {if (imgUrls.length == imgBase64.length) {for (var i = 0; i < imgUrls.length; i++) {var fileName = imagesNames[imgBase64[i].index];//config.initialPreviewConfig[(imgBase64[i].index)].caption;//---下载名字img.file(fileName, imgBase64[i].val, {base64: true});}zip.generateAsync({type: "blob"}).then(function(content) {// see FileSaver.jssaveAs(content, folderName + ".zip");});$('#' + tipInfoId).text('下载完成！');} else {//console.log('imgs.length:'+imgs.length+',imgBase64.length:'+imgBase64.length);$('#' + tipInfoId).text('已完成：' + imgBase64.length + '/' + imgUrls.length);tt();}}, 100);}tt();//以下两个函数以前是在外面的//传入图片路径，返回base64function getBase64(img, indexOf1) {function getBase64Image(img, indexOf2, width, height) { //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小var canvas = document.createElement("canvas");canvas.width = width ? width : img.width;canvas.height = height ? height : img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, canvas.width, canvas.height);//var dataURL = canvas.toDataURL();var dataURL = canvas.toDataURL("image/jpeg", 0.96);//var dataURL = canvas.toDataURL("image/jpeg", 1);var returnData = {index: indexOf2,val: dataURL}return returnData;}var image = new Image();image.crossOrigin = 'Anonymous';image.src = img;var deferred = $.Deferred();if (img) {image.onload = function() {deferred.resolve(getBase64Image(image, indexOf1)); //将base64传给done上传处理}return deferred.promise(); //问题要让onload完成后再return sessionStorage['imgTest']}}}</script></html>相关知识
js高级对象之File、Bolb、FileReader、URI对象/base64字符串、Fromdata
作者
QQ1092413979
浏览器中利用js打包下载所有类型文件相关推荐
- JavaScript实战篇 -ajax方式实现js打包下载文件
一.问题描述 在我们日常开发中,会遇到批量下载方面的问题;如上图所示,我们要批量下载图片,接下来我们就模拟实现这个功能,并将下载文件打包下载; 二.准备工作 2.1 JSZip JSZip 是一个 j ...
- php文件管理 打包,Thinkphp6如何利用ZipArchive打包下载文件
下面给大家介绍Thinkphp6利用ZipArchive打包下载文件的方法,希望对需要的朋友有所帮助!基础环境 系统环境:Windows10 x64 PHP集成环境:phpstudy PHP依赖管理工 ...
- html调用一个php文件路径_HTML中利用js调用php的内容
HTML中利用js调用php的内容 经常会看到很多网站的统计代码都是以js调用的形式显示的,下面我们就来看看那如何实例的吧. $countfile = "num.txt"; //定 ...
- 浏览器中的js不能同步更新的解决方案
解决方案有三种,分别是: 1.清浏览器缓存 2.清服务器缓存 3.更改项目中对应的js文件名(大招) 在项目的整合过程出现了浏览器中的js和项目里面的js不是同步的.起初,由于需求变动,需要前端多传三 ...
- HTML中利用JS调用PHP (以登录为例)
最近在做 Login 和 Register 的东西,因为需要用到 session 来存储用户的 id 和 用户名,所以需要调用 php 中的 session.由于不会 Ajax, 所以不得不用一些笨办 ...
- 浏览器交响曲 （一）浏览器中的js执行机制
浏览器的工作原理 浏览器中的js执行机制 单线程的含义 同步.异步 完了吗?事情并非如此 所以执行的机制是怎样的?(宏任务.微任务) 个人理解: 希望过路大佬不吝赐教 浏览器中的js执行机制 今天在网 ...
- 如何在浏览器中调试JS代码，debug
如何在浏览器中调试JS代码,debug 首先需要一段js代码,我将它放进html文件里面: 创建一个html文件,<script>标签里面放入需要调试的js代码,html文件如下: < ...
- js vue 下载excel(.xls)文件
@[TOC](js vue 下载excel(.xls)文件) 先看下载下来的excel文件 1.首先,后端给到的是一个文件在服务器中的存储地址 D:\MaxSecFile\Export\Alarm_2 ...
- 在Chrome浏览器中如何将网页保存为单个文件mhtml？
在Chrome浏览器中如何将网页保存为单个文件mhtml? 问题: 在Chrome浏览器中如何将网页保存为单个文件mhtml? 答案: 下载一个 Save Page WE 扩展程序: 将其添加到浏览器 ...
最新文章
- Windows Azure Platform Introduction (2) 云计算的分类和服务层次
- php ping 命令注入,CTF关于ping命令注入问题
- rqnoj 496 [IOI1999]花店橱窗布置 （简单dp）
- Hama笔记：Unable to load native-hadoop library 和 Snappy native library not loaded 的解决
- 争议“云游戏”：一个几十亿规模的颠覆者？一场徐虎飘渺的幻梦
- java泛型特点_java泛型简单总结
- 【转】eclipse中window-preference选项中没有tomcat的解决方法
- Scala Hello 示例
- CPU实时人脸检测，各种朝向、侧脸都检出来
- [机器学习] 机器学习中所说的“线性模型”是个什么东西？
- 漏洞扫描器 - cmd命令行执行
- esxi7.0 打包网卡驱动
- WPF自定义控件与样式(13)-自定义窗体Window 自适应内容大小消息框MessageBox
- [Android App] iPhoneX朋友圈小尾巴工具
- 天津市科技领军企业和领军培育企业补助奖励及认定条件，补贴500万
- 孢子社群：今日推荐ARVR微信群：游乐VR智能
- 折半查找判定树 二叉排序树 查找成功平均查找长度 查找失败平均查找长度
- 《痞子衡嵌入式半月刊》 第 24 期
- 您如何用leetcode进行面试很不好
- 13. 软件包详解,rpm包的查找,安装,升级,卸载,验证等所有操作