/**
* Excel文件下载
*/
MetronicApp.service('ExcelFileDownLoad', ['$http',function($http) {
this.downLoad = function(url, data, fileName){
$http({
url: url, //请求文件地址,服务端返回的是二进制数据流
method: 'post',
responseType: 'arraybuffer', //防止乱码
contentType: 'application/json',
data: data
}).success(function (data, status, headers) {
//使用{type: "application/vnd.ms-excel"}的写法,可以保存为xls格式的excel文件(兼容老版本)。而使用“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”则会保存为xlsx
//客户端接收后转换为指定文件格式的blob,最后创建blob对象的URL
let blob = new Blob([data], {type:'application/vnd.ms-excel'}, decodeURI(headers(){'x-filename'}));
//把它放在A标签的href上 就会自动下载了
var anchor = angular.element('<a/>'); // 创建a元素
anchor.attr({
href: URL.createObjectURL(blob), //blob对象的URL放在a链接上就自动下载
target: '_blank',
download: fileName
})[0].click(); //当前元素绑定单击事件
})
}
}])
···
ExcelFileDownLoad.downLoad("/downloadExcel", $scope.vo, "标题")
知识点:blob —在客户端处理二进制数据的js对象类型,包含二进制数据的容器
认识blob对象
input标签有一个上传文件的类型,type=’file’,当用户点击上传文件后,会返回一个FileList对象,file对象就存在于FileList对象中,file对象继承自blob。
// 参数一:需要被处理的数据序列,可以是任意格式的值;参数二:配置的参数,指定MIME类型
let blob = new Blob([data], {type: "application/vnd.ms-excel"});
// 属性
// 1、blob.size ; 对象中所包含的数据的大小(字节)
// 2、blob.type ; 一个字符串,表明该Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。
// 方法
// 1、blob.slice([index, length, contentType]) ;返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据
// 分片上传文件的案例
let chunk = 1024 * 1024; // 每个文件切片大小定为1MB
let file = document.getElementById("file"); //获取input文件
initUpload();
function initUpload(){
file.onchange = function(){
let blob = file.files[0];
let blobs = [];
if(blob){
for(let i=0;i<Math.ceil(blob.size / chunk);i++){
blobs[i] = blob.slice(i * chunk, chunk);
}
}
// 将blobs文件分别上传到服务器
upLoad(blobs)
}
}
// 上传file对象组成的blobs数组对象
//表单文件上传 new FormData(); 异步上传二进制文件 (类比:jQuery方法中的serialize(), 作用就是表单序列化,查询字符串形式获得类表单post/get的数据给Ajax请求:id=123&username=root)
FormData是浏览器原生的,且支持二进制文件
function upLoad(data) {
let url = $("#albumItemCommentURL").val();
let params = {"mediaType": 3};
let audioBase64Data = $("#audioBase64Data").attr("src");
//获取图片的base64
//创建formData对象
let formData = new FormData();
//添加图片的blob
if (audioBase64Data) {
let blobBin = dataURLtoBlob(audioBase64Data);
let fileType = blobBin.type.split("/")[1];
params.fileType = fileType;
formData.append('file', blobBin);
}
//添加请求参数的blob
let dataWithType = new Blob([JSON.stringify(params)], {type: "application/json"});
formData.append("data", dataWithType);
//上传数据
$.ajax({
url: url,
type: 'post',
processData: false,
contentType: false,
data: formData,
dataType: 'json',
success: function (data) {
let obj = eval(data);
if (obj.responseCode == '0') {}
},
error: function (jqXHR, textStatus, errorThrown) {}
});
}
/* 工具方法:dataURL(base64字符串)转换为Blob对象(二进制大对象) */
//data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
function dataURLtoBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1].replace(/\s/g, ''));
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime}); //值,类型
}
// 创建一个链接下载文件的案例
function downLoad(url, data, fileName){
$http({
url: url,
method: 'post',
responseType: 'arraybuffer',
contentType: 'application/json',
data: data,
}).success(function(data, status, headers){
// 后台返回的数据存在blob容器中
let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
// window.URL对象可以为Blob对象生成一个网络地址,结合a标签的download属性,可以实现点击url下载文件
let a = document.createElement("a");
a.attr({
href: window.URL.createObjectURL(blob),
download = "文件.xls",
}).click()
})
}
//获取剪切板上的数据
document.addEventListener('paste', function (e) {
let cbd = e.clipboardData; // 获取剪切板数据
//创建读取器对象FileReader
var read=new FileReader();
for(let i = 0; i < cbd.items.length; i++) {
let item = cbd.items[i];
if(item.kind == "file"){
let blob = item.getAsFile();
if (blob.size === 0) {
return;
}
console.info(blob);
read.readAsText(blob); //开始读取文件
//read.readAsDataURL(blob); //读取图片地址数据
read.onload=function (e) { //数据读完会触发onload事件
console.log(read.result); //read有个result属性存放这结果,从result获取到数据
}
}
}
});