我们在前端有时会把当前的页面显示成图片, 如订单, 物流信息打印出来, 这时, 我们要不用是使用截图工具转发, 要没就是手机拍照, 如果使用 js 来把当前的 html下载成为图片, 怎么做到呢 这里有一个工具 html2canvas 使用起来很简单
用法也很简单,html2canvas(这是里的参数是要使用 canvas 画的 html 上的文档节点)
看下面的这段代码
daochu(){ let node = this.$refs.aaa; html2canvas(node).then(function(canvas) { let img = new Image(); img = canvas.toDataURL('image/png'); var d = document.createElement("a"); d.download = ''; d.href = img; document.body.appendChild(a); d.click(); d.remove(); }); },这样就可以下载图片了 上面的代码是打开了,图片, 当然同时也下载了这个图片 下面的代码, 就是真正的下载一个文件了
downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { let canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; let context = canvas.getContext("2d"); context.drawImage(image, 0, 0, image.width, image.height); let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据 let a = document.createElement("a"); // 生成一个a元素 let event = new MouseEvent("click"); // 创建一个单击事件 a.download = name || "photo"; // 设置图片名称 a.href = url; // 将生成的URL设置为a.href属性 a.dispatchEvent(event); // 触发a的单击事件 }; image.src = imgsrc; },下载原理
我们先看看 download 的使用方法:
<a href="http://somehost/somefile.zip" download="filename.zip">Download file</a>看看上面的代码,只要为 <a> 标签添加 download 属性,我们点击这个链接的时候就会自动下载文件了~ 顺便说下,download 的属性值是可选的,它用来指定下载文件的文件名。像上面的例子中,我们下载到本地的文件名就会是 filename.zip 拉,如果不指定的话,它就会是 somefile.zip 这个名字拉!
看到这里,你可能会说,坑爹啊,这明明是用 HTML 5 的新特性来实现下载文件嘛,说好的用 JavaScript 下载文件呢?
事实上,用 JavaScript 来下载文件也是利用这一特性来实现的,我们的 JavaScript 代码不外乎就是:
用 JavaScript 创建一个隐藏的 <a> 标签 设置它的 href 属性 设置它的 download 属性 用 JavaScript 来触发这个它的 click 事件 翻译成 JavaScript 代码就是:
var a = document.createElement('a'); var url = window.URL.createObjectURL(blob); var filename = 'what-you-want.txt'; a.href = url; a.download = filename; a.click(); window.URL.revokeObjectURL(url); window.URLwindow.URL 里面有两个方法:
createObjectURL 用 blob 对象来创建一个 object URL(它是一个 DOMString),我们可以用这个 object URL 来表示某个 blob 对象,这个 object URL 可以用在 href 和 src 之类的属性上。 revokeObjectURL 释放由 createObjectURL 创建的 object URL,当该 object URL 不需要的时候,我们要主动调用这个方法来获取最佳性能和内存使用。 知道了这两个方法之后,我们再回去看看上面的例子就很容易理解了吧!只是用 blob 对象来创建一条 URL,然后让 标签引用该 URL,然后触发个点击事件,就可以下载文件了!
那么问题来了,blob 对象哪里来?
BlobBlob 全称是 Binary large object,它表示一个类文件对象,可以用它来表示一个文件。根据 MDN 上面的说法,File API 也是基于 blob 来实现的。
//例如 var img = new Image(); 这个img 就是一个二进制对象 // filereader.readAsBinaryString
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #使用 #js #把当前面下载成为图片 #如订单 #物流信息打印出来 #这时 #我们要不用是使用截图工具转发