JavaScript 实现线上文档文件下载

文件类型

常见文件类型有，图片、pdf、word、excel、txt 等
不同文件实现下载时，请求头类型不一致，所以要获取到文件类型
在已知文件路径的情况下，我采用 split 方法获取文件类型

// 已知文件线上路径
let fileUrl1 = 'https://XXX.XXX/XX/test.doc';
let fileUrl2 = 'http://XXX/test.txt';
let fileUrl3 = 'https://XXX-XXX-XX/test.pdf';
let fileUrl4 = 'https://XXX/XXX/XX/test.png';
let fileUrl5 = 'https://XXX.XXX/XX/test.xls';
function getFileType(url){if(url) {// 先用斜杠截取let tempArr1 = url.split('/');// 获取到截取结果的最后一位，即文件名称let fileName = tempArr1[tempArr1.length-1];// 再用点截取let tempArr2 = fileName.split('.');// 得到文件类型let type = tempArr2[1];return type;}else {return '';}
}
let type1 = getFileType(fileUrl1);// doc
let type2 = getFileType(fileUrl2);// txt
let type3 = getFileType(fileUrl3);// pdf
let type4 = getFileType(fileUrl4);// png
let type5 = getFileType(fileUrl5);// xls
console.log(type1,type2,type3,type4,type5);

在以上方法适用时，将常见文件类型大致分为四类，其中除了 img 类型和 txt 类型，进行下载功能是，都需要有特殊的请求头属性

let type = ''
if (typeFront == 'jpg' || typeFront == 'jpeg' || typeFront == 'png') {type = 'img'
} else if (typeFront == 'pdf') {type = 'pdf' // application/pdf
} else if (typeFront == 'doc' || typeFront == 'doxc') {type = 'word' // application/msword
} else if (typeFront == 'xlsx' || typeFront == 'xls') {type = 'excel' // application/vnd.ms-excel
}

图片类型文件的下载

将图片重绘到本地，得到图片新路径
创建 a 标签，根据图片新路径，实现下载功能

// 创建图片对象
let image = new Image();
image.onload = function () {let canvas = document.createElement('canvas');canvas.width = this.naturalWidth;// H5 属性，获取图片原始宽度canvas.height = this.naturalHeight;// H5 属性，获取图片原始高度// 在画布上重绘图像canvas.getContext('2d').drawImage(image, 0, 0);// 获取到重绘的图片对象--base64 编码let result = canvas.toDataURL('image/png');// 创建标签const link = document.createElement("a");link.href = result;// a 标签设置 download 属性，直接下载图片link.setAttribute("download", '获取到的图片名称.png');document.body.appendChild(link);link.click();link.remove();
};
// 跨域获取当前图片
image.setAttribute("crossOrigin", 'Anonymous');
image.src = url;// url 为图片原本的线上地址

文档类型文件的下载

基于 window 的 fetch() 实现简单请求，模拟下载接口事件
使用 blob() 方法获取到 Blob 对象
使用 createObjectURL 获取到 DomString

// url 为文件的线上地址
fetch(url, {method: "get",mode: "cors",
})
.then((response) => response.blob())
.then((res) => {const downloadUrl = window.URL.createObjectURL(//new Blob() 对后端返回文件流类型处理new Blob([res], {type: type == "pdf" ? "application/pdf" : type == "word" ?"application/msword" : type == "excel" ? "application/vnd.ms-excel" : ""}));// 创建标签const link = document.createElement("a");// 对处理后的文件进行标签绑定link.href = downloadUrl;link.setAttribute("download", data.name);document.body.appendChild(link);link.click();link.remove();
}).catch((error) => {window.open(url);
});

对以上方法进行封装

// 下载各类型文件
// downloadUrl--文件线上地址
export function downloadPaper(downloadUrl) {// 获取文件类型let type = getFileType(downloadUrl);// 获取文件名称let fileName = getFileName(downloadUrl);if (type == 'img') {downloadImg(downloadUrl).then((res) => {// 创建标签const link = document.createElement("a");link.href = result;// a 标签设置 download 属性，直接下载图片link.setAttribute("download", '获取到的图片名称.png');document.body.appendChild(link);link.click();link.remove();}).catch((err) => {console.log(err);})} else {downloadFile({url: downloadUrl,type: type,name: fileName})}
}
function getFileType(url){if(url) {// 先用斜杠截取let tempArr1 = url.split('/');// 获取到截取结果的最后一位，即文件名称let fileName = tempArr1[tempArr1.length-1];// 再用点截取let tempArr2 = fileName.split('.');// 得到文件类型let type = tempArr2[1];let myType = ''if (type == 'jpg' || type == 'jpeg' || type == 'png') {myType = 'img'} else if (type == 'pdf') {myType = 'pdf'} else if (type == 'doc' || type == 'doxc') {myType = 'word'} else if (type == 'xlsx' || type == 'xls') {myType = 'excel'}return myType;}else {return '';}
}
function getFileName(url){if(url) {// 先用斜杠截取let tempArr1 = url.split('/');// 获取到截取结果的最后一位，即文件名称let fileName = tempArr1[tempArr1.length-1];return fileName;}else {return '';}
}
// 下载图片
function downloadImg(url) {return new Promise((resolve, reject) => {// 重绘图片let image = new Image();image.onload = function () {let canvas = document.createElement('canvas');canvas.width = this.naturalWidth;canvas.height = this.naturalHeight;canvas.getContext('2d').drawImage(image, 0, 0);let result = canvas.toDataURL('image/png')resolve(result);};// 跨域获取当前图片image.setAttribute("crossOrigin", 'Anonymous');image.src = urlimage.onerror = () => {reject(new Error('urlToBase64 error'));};})
}
// 下载文件
function downloadFile(data) {fetch(data.url, {method: "get",mode: "cors",}).then((response) => response.blob()).then((res) => {const downloadUrl = window.URL.createObjectURL(//new Blob() 对后端返回文件流类型处理new Blob([res], {type: data.type == "pdf" ? "application/pdf" : data.type == "word" ?"application/msword" : data.type == "excel" ? "application/vnd.ms-excel" : ""}));//word文档为msword,pdf文档为pdfconst link = document.createElement("a");link.href = downloadUrl;link.setAttribute("download", data.name);document.body.appendChild(link);link.click();link.remove();}).catch((error) => {window.open(url);});
}

JavaScript 实现线上文档文件下载相关推荐

docsify安装（线上文档）
01.docsify 是什么一款神奇的文档生成利器自从有了 Markdown, 我就再没用过富文本编辑器,因为 Markdown 的书写有一种心流的感觉.很多博客平台都支持 Markdown 了, ...
一个python网上文档
找到了一个学习python的网上文档,内容很丰富,详细介绍各种API的用法,例子也很有趣 https://docs.python.org/3.3/library/index.html 下载python ...
JavaScript读写.txt文档 - 方法篇
JavaScript读写.txt文档:分析与方法详情参考完整教程: Javascript本地写入txt和读取txt文件示例案例篇:求HTML或者JS读取TXT文件内容的代码以上就是关于 &quo ...
javaScript读取txt文档的FSO对象和ADODB.Stream对象
转自:http://blog.163.com/chaosumin@126/blog/static/86387403201092793610651 在使用JavaScript读取txt文档时,一般使用j ...
html实现打开word文档,用javascript打开word文档的方法
用javascript打开word文档的方法首先我们新建一个html文件,并且写一个FileUpLoad以及button控件. 代码如下: 复制代码代码如下: fileUpload 然后,在写一个 ...
JavaScript之充实文档的内容
1.我们在平时的开发中会碰到一些缩略语如:XML,HTML,API等专业术语:为了能使用户,更好的了解术语的意思,我们通常会给<abbr></abbr>标签加一个title属性 ...
javascript 中文帮助文档_实战式方法学习JavaScript（1）
案例1:表格行悬停提示效果 [参考文献] 1.JavaScript前端开发模块化教材(人民邮电出版社)赵健保 2.https://www.w3cschool.cn/ 任务导入: 在Web标准中,HTM ...
html点击打开word文档,javascript打开word文档的方法
首先我们新建一个html文件,并且写一个FileUpLoad以及button控件. 代码如下: 复制代码代码如下: fileUpload 然后,在写一个javascript OpenFile方法. ...
js+打开php文档,javascript打开word文档的方法_基础知识
首先我们新建一个html文件,并且写一个FileUpLoad以及button控件. 代码如下: fileUpload 然后,在写一个javascript OpenFile方法. 代码如下: funct ...

JavaScript 实现线上文档文件下载

文件类型

图片类型文件的下载

文档类型文件的下载

对以上方法进行封装

JavaScript 实现线上文档文件下载相关推荐

最新文章

热门文章