すべての種類のファイルをダウンロードするには、ブラウザを使用してのJSパッケージ
アウトライン
要件：1つの、複数のファイルをダウンロードするには、ボタン上のプロジェクトクリック（写真は以上であってよく、それはPDFなどの文書の多くの種類の可能性があり、あらゆるタイプの画像圧縮ファイルなどをエクセル）、および複数のURLブラウザのアドレスでこれらのこのデモを使用するには、圧縮されたパッケージのダウンロードに圧縮されたファイルと一緒に達成することができます。2.ブラウザは、このようなアリがOOSになると、キャッシュトラフィックが再びダウンロード消費し、このように良い圧縮をダウンロードするには、ブラウザから直接圧縮されたパッケージとしてパッケージサーバーを必要としませんしませんからダウンロードされる前に負荷があまりにもあればこの効率性とスピードが非常に高速ですので、ファイルはブラウザから直接ダウンロードすることができますが、パッケージをダウンロードするにはサーバーを介して再びパックする必要はありません。
AJAXリクエストは、ダウンロードにすべての種類のファイルをパッケージ化されています
XMLHttpRequestのAJAX要求を使用する利点は次のとおりです。
1.任意の種類のファイルをダウンロードすることができます。2.キャッシュから直接画像を読み込むことができますブラウザの前にキャッシュされた場合。対応することができる配列名によると、オンラインの方法は、一般名に対応していません。ダウンロード3. [カスタムエラータイプのテキストプロンプト
ダウンロード：AJAXリクエストは、ダウンロードにソースコードのすべての種類のファイルをパッケージ化されています
すべての画像をダウンロードするには、パッケージをレンダリングキャンバス
<!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.js
saveAs(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();
//以下两个函数以前是在外面的
//传入图片路径，返回base64
function 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のファイルの高度なオブジェクト、Bolb、FileReaderのは、URIは、オブジェクト/ base64文字列、Fromdataを
著者
QQ1092413979
