首页 > 其他分享 >vue 文件下载与图片下载

vue 文件下载与图片下载

时间:2023-01-12 11:45:31浏览次数:44  
标签:canvas vue const url image 图片下载 height 下载

文件下载

window.open(url,'_self')

图片下载

点击查看代码
handleDownload(imgSrc, name){
	const image = new Image();
	// 解决跨域 Canvas 污染问题
	image.setAttribute("crossOrigin", "anonymous");
	image.src = imgSrc;
	image.onload = () => {
		const canvas = document.createElement("canvas");
		canvas.width = image.width;
		canvas.height = image.height;
		const context = canvas.getContext("2d");
		context.drawImage(image, 0, 0, image.width, image.height);
		canvas.toBlob((blob) => {
			const url = URL.createObjectURL(blob);
			const a = document.createElement("a");
			a.download = name || "photo";
			a.href = url;
			a.click();
			a.remove();
			URL.revokeObjectURL(url);
		});
	};
},

标签:canvas,vue,const,url,image,图片下载,height,下载
From: https://www.cnblogs.com/shannen/p/17046040.html

相关文章

  • vue动态挂载组件
    平时我们渲染组件都是通过路由的方式。但有时候不太满足需要,需要我们手动去挂载组件。方式如下:通过调用一个方法去实现动态挂载组件:importVuefrom"vue"importj......
  • vue 如何监测真实Dom是否加载完成
    1、充分利用浏览器的队列特性://声明定时器vartimer=null//检查dom是否执行完成functioncheck(){//onMounted挂载完dom获取为空,真实dom在对象中......
  • vue的seo
    我们知道,常规用Vue/React开发的是SPA应用。但是天然的单页面应用SEO就是不好。虽然说现在也有各种技术可以改善了,比如使用服务端渲染、静态页面生成,不过也存在各种......
  • MongoDB下载安装与测试连接(windows)
    一、MongoDB下载MongoDB为Windows提供了两种安装方式,分别是msi和zip方式。msi方式对4.0以上版本进行了优化,而3.x版本则需在安装后手动进行配置;zip方式解压即安装,但需要配......
  • Vue 之 element 输入框验证及常用正则
    1.控制输入位数限制输入为10位,这种方式可以使输入框中输入10位后不能输入后续内容因为number输入框自动将最后一位小数点忽略不计,因此“.”,"2.","3.3."这三种情况均为......
  • linux xshell 命令上传下载文件
     有些堡垒机运维用xshell,但没xftp,使用xshell+命令上传文件rz,sz是便是Linux/Unix同Windows进行ZModem文件传输的命令行工具,所以要在Xshell连接属性中的设置上传协议为Zm......
  • Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
    转载请注明出处:1.Promise的then方法使用then方法是 Promise中处理的是异步调用,异步调用是非阻塞式的,在调用的时候并不知道它什么时候结束,也就不会等到他......
  • springMVC文件下载
    通常来说,当我们给浏览器一个文件的路径,当那个文件能够被浏览器直接打开的话,浏览器就直接打开,如果浏览器无法直接打开那么浏览器就会提示用户可以下载这个文件现在我们要做......
  • Vue.js 双向数据绑定原理
    Vue双向数据绑定原理涉及到Vue中的响应式系统和模板编译。在Vue中,响应式系统是通过Object.defineProperty或者Proxy来实现的。当Vue创建一个Vue实例时,它会遍......
  • 【Java】Vue-Element-Admin 嵌入Druid监控面板
     我看到若依做了Druid面板的嵌入,我自己的项目干脆也做一个 一、后台服务SpringBoot:Druid配置项:spring:datasource:url:jdbc:mysql://127.0.0.1:3308/tt?s......