js实现文档图片下载

待我称王封你为后i 2022-04-15 06:09 235阅读 0赞

方法一（亲测goolge firefox可以，其他的浏览器据说不支持，有待验证），可以更改filename名字来修改文件类型

createDownload("download.doc","download file");
    
    		function createDownload(fileName, content){
    		var blob = new Blob([content]);
    		var link = document.createElement("a");
    		link.innerHTML = fileName;
    		link.download = fileName;
    		link.href = URL.createObjectURL(blob);
    		document.getElementsByTagName("body")[0].appendChild(link);
    	}

方法二

插件：（本人没有测试）

[https://github.com/SheetJS/js-xlsx][https_github.com_SheetJS_js-xlsx]   
[https://github.com/eligrey/FileSaver.js][https_github.com_eligrey_FileSaver.js]

参考博客：[https://blog.csdn.net/u010427666/article/details/79208145][https_blog.csdn.net_u010427666_article_details_79208145]

方法三

后台配置可下载

window.open(url,'_blank')

测试案例代码：实现读取任意位置图片，并下载到桌面（浏览器默认下载位置）

<input type="file" value="上传" id="upLoadImg" onchange="upLoad()">
    		<a onclick="clickloading()" id="btn" style="border: 1px solid black;background-color: black;color: white;">点击</a>

var dataBox="";
    	var filename="";
    	function upLoad(){
    		var file=document.getElementById('upLoadImg').files[0];
    		filename=file.name;
    		var reader=new FileReader();
    		reader.readAsDataURL(file);
    		reader.onload=function(){
    			dataBox=dataURLtoBlob(this.result)
    			
    		}
    		
    		}
    
    		function dataURLtoBlob(dataurl) {
    			var arr = dataurl.split(',');
    			console.log(arr);
    			mime = (arr[0]).match(/:(.*?);/)[1];
    			bstr = atob(arr[1]);
    			n = bstr.length;
    			u8arr = new Uint8Array(n);
    			while (n--) {
    				u8arr[n] = bstr.charCodeAt(n);
    			}
    			return new Blob([u8arr], {
    				type: mime
    			});
    		}
    
    			
    		function clickloading(){
    				createDownload(filename,dataBox);
    			}
    			function createDownload(filename, dataBox){
    			var blob = new Blob([dataBox]);
    			var btn=document.getElementById('btn');
    			btn.download = filename;
    			btn.href = URL.createObjectURL(blob);
    		}

[https_github.com_SheetJS_js-xlsx]: https://github.com/SheetJS/js-xlsx
[https_github.com_eligrey_FileSaver.js]: https://github.com/eligrey/FileSaver.js
[https_blog.csdn.net_u010427666_article_details_79208145]: https://blog.csdn.net/u010427666/article/details/79208145

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关使用node.js下载图片

要准备下载的图片： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

待我称王封你为后i/ 2022年12月29日 09:27/ 0 赞/ 104 阅读

相关 vue实现下载图片

<template> <div class="dialog_content_dowload" @click="handleDowload(dialogT

旧城等待，/ 2022年09月14日 13:22/ 0 赞/ 189 阅读

相关 js+html实现图片的上传和下载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

缺乏、安全感/ 2022年08月28日 10:52/ 0 赞/ 181 阅读

相关使用cropbox.js+jquery.js+servlet实现图片的上传下载

采用cropbox.js+jqueryajax + servlet实现图片的上传下载原理解释：利用javascript的内置对象FileReader读取计算机中的文

布满荆棘的人生/ 2022年06月14日 02:19/ 0 赞/ 164 阅读

相关 JS压缩图片并下载

let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin

旧城等待，/ 2022年04月24日 15:24/ 0 赞/ 284 阅读

相关 js实现文档图片下载

方法一（亲测goolge firefox可以，其他的浏览器据说不支持，有待验证），可以更改filename名字来修改文件类型 createDownload("down

待我称王封你为后i/ 2022年04月15日 06:09/ 0 赞/ 236 阅读

相关浏览器端用JS实现创建和下载图片

问题场景在前端很多的项目中，文件下载的需求很常见。尤其是通过JS生成文件内容，然后通过浏览器端执行下载的操作。如图片，Execl 等的导出功能。日前，项目中就遇到了这类

「爱情、让人受尽委屈。」/ 2022年03月25日 02:52/ 0 赞/ 300 阅读

相关前端js实现字符串/图片/excel文件下载

在`web`开发中，如果你想让用户下载或者导出一个文件，应该怎么做呢？传统的做法是在后端存储或者即时生成一个文件来提供下载功能，这样的优势是可以做权限控制、数据二次处理，

淩亂°似流年/ 2022年03月19日 14:16/ 0 赞/ 286 阅读

相关 HTML+JS实现浏览器前端下载图片

最近做项目需要用到js图片下载，按照原先下载文件的思路，我感觉直接 window.open("下载链接"); 就可以了，但实际操作后，发现这个只会在新窗口打开图片，并不会触发下

￡神魔★判官ぃ/ 2022年01月14日 02:53/ 0 赞/ 432 阅读

相关 js 图片下载

downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image();

灰太狼/ 2021年08月13日 22:00/ 0 赞/ 474 阅读