js 下载内容

前言

js 下载文件 的种类

    1.  下载图片
    2.  下载文档(excel, word, pdf, txt .....)
    3.  下载视频
    4.  下载音频

js 下载文件 的方法

    1.  后台服务器有静态资源且是固定的文件名（GET方式下载文件）
    2.  后台返回文件流
    3.  特例: 图片等部分类型 可以通过js直接下载

备注

    1. 此处重点讲解第二种和第三种下载方式;
    2. 针对第一种方式请自行调用: window.location.href = 'http://www.域名/template.xlsx(文件名)';
    3. 建议下载配合prototype 使用

文件下载 图片

/*
 * imgsrc 下载图片的url
 * opt 各类备注合集
 *      name  下载文件名称
 *      width  自定义宽
 *      height  自定义高
 */
function downloadIamge(imgsrc, opt = {}) {
	let { name, width = '', height = '' } = opt;
	//下载图片地址和图片名
	let image = new Image();
	// 解决跨域 Canvas 污染问题
	image.setAttribute('crossOrigin', 'anonymous');
	image.onload = function () {
		let canvas = document.createElement('canvas');
		canvas.width = width || image.width;
		canvas.height = height || image.height;
		let context = canvas.getContext('2d');
		context.drawImage(image, 0, 0, width || image.width, height || image.height);
		let url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
		let a = document.createElement('a'); // 生成一个a元素
		let event = new MouseEvent('click'); // 创建一个单击事件
		a.download = name || '文件说明'; // 设置图片名称
		a.href = url; // 将生成的URL设置为a.href属性
		a.dispatchEvent(event); // 触发a的单击事件
	};
	image.src = imgsrc;
}

使用方式：

let url = 'https://zy-rc.boka.vc/activity/4066a6a4-c229-48cb-91e4-e98613941111.png';
let name = '小程序营销-2';
downloadIamge(url, name);

文件下载 CSV

let url = '请求路径URL';
let params = { 参数Params };
let header = { responseType: 'blob' };
axios.post(url, params, header).then(function (res) {
	let response = res.data;
	response = '\ufeff' + response;
	var blob = new Blob([response], {
		type: '.csv, charset=utf-8, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel',
	});
	let name = '沃尔玛网络渠道商品销售成本报告';
	if (window.navigator.msSaveOrOpenBlob) {
		// IE10+
		window.navigator.msSaveOrOpenBlob(blob, name);
	} else {
		// 修改后 兼容max windows
		const us = window.URL.createObjectURL(blob);
		let filename = name + '.csv';
		const link = document.createElement('a');
		link.style.display = 'none';
		link.href = us;
		link.setAttribute('download', filename);
		document.body.appendChild(link);
		link.click();
	}
});

文件下载 - 普类

// 快速切换格式
let url = '请求路径URL';
let params = { 参数Params };
let header = { responseType: 'blob' };
axios.post(url, params, header).then(function (res) {
	var blob = res.data;
	// FileReader 主要用于将文件内容读入内存
	var reader = new FileReader();
	reader.readAsDataURL(blob);
	// onload 当读取操作成功完成时调用
	reader.onload = function (e) {
		var a = document.createElement('a');
		// 获取文件名  fileName
		var fileName = res.headers['content-disposition'].split('=');
		fileName = fileName[fileName.length - 1];
		fileName = fileName.replace(/"/g, '');
		a.download = fileName;
		a.href = e.target.result;
		document.body.appendChild(a);
		a.click();
		document.body.removeChild(a);
	};
});

文件下载 - 普类Blob

function downloadFile(content, filename) {
	var a = document.createElement('a');
	var blob = new Blob([content]);
	var url = window.URL.createObjectURL(blob);
	a.href = url;
	a.download = filename;
	a.click();
	window.URL.revokeObjectURL(url);
}
// 调用
var filename = 'xxx.' + url.replace(/(.*\.)/, ''); // 自定义文件名+后缀
downloadFile(file, filename);
// file 文件流    // filename 文件名称