vue下载跨域图片

article/2025/4/25 17:21:21
<a style="color: #409EFF;" @click="downImg(url)">下载还款凭证</a>//方法一   (只有这种方法解决我的需求)
downImg(imgsrc) {const src = `${imgsrc}?t=${new Date().getTime()}`fetch(src).then(res => {res.blob().then(myBlob => {const href = URL.createObjectURL(myBlob)const a = document.createElement('a')a.href = hrefa.download = '凭证.jpg'a.click()a.remove()})})}//方法二   (个别适用,有事也会显示跨域)
downImg(imgsrc) {const image = new Image()// 解决跨域 Canvas 污染问题image.setAttribute('crossOrigin', 'anonymous')image.onload = function() {const canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightconst context = canvas.getContext('2d')context.drawImage(image, 0, 0, image.width, image.height)const url = canvas.toDataURL('image/png') // 得到图片的base64编码数据const a = document.createElement('a') // 生成一个a元素const event = new MouseEvent('click') // 创建一个单击事件a.download = 'name' || 'photo' // 设置图片名称a.href = url // 将生成的URL设置为a.href属性a.dispatchEvent(event) // 触发a的单击事件}image.src = imgsrc
}

效果图
在这里插入图片描述

//根据个人需求选择方法


http://chatgpt.dhexx.cn/article/fMVriCH0.shtml

相关文章

vue点击url链接下载文件

在src下面新建一个downLoadUrl的目录 downLoadUrl / index.js文件 /** 后端返回文件的url,前端创建a标签来下载** 1. 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题,* 2. 下载文件时,浏览器会有闪动的问题** 页面内使用* 1. 引入指令 import do…

vue文件下载及重命名

本文所讲的下载地址格式为&#xff1a;地址文件名&#xff08;例如&#xff1a;http... test.docx&#xff09; 页面代码&#xff1a; <!--map为所下载的文件信息&#xff0c;包括文件名、路径等 --> <p v-down"map">这是文件名</p> js代码…

使用npm下载vue-router(vuex)路由报错,“export ‘XXXX‘ was not found in ‘vue‘

vue-router vuex 报错同理 vue-router vuex 报错同理 今天在写vue项目使用cnpm下载路由&#xff0c;然后就报错"export ref was not found in vue 原因&#xff1a;cnpm install vue-router --save 现在默认下载的是4.x的版本 &#xff0c;我是用的是…

vue实现文件下载

vue中文件下载 前言 Vue浏览器文件下载最简单的方法就是用a链接实现&#xff0c;然后加一个download属性。让后端返回[blob]文件格式&#xff0c;需要传递 responseType: ‘blob’ 一、使用步骤 展示文件&#xff0c;文件点击后查看方法为handlePreview <span style&qu…

vue学习之一:下载vue-cli项目

这几周一直辗转在vue官网和各大博客搜索关于vue项目实战的例子。学的实在是零零碎碎的。不过总算在对于vue项目搭建有个基本认知&#xff0c;于是直接拿起以前做过的项目进行改版了&#xff0c;接下来是从怎么搭建vue2.xvue-router项目实战写的一些列文章。我的开发环境都是基于…

下载vue脚手架@vue/cli(详解)

1.首先到官网下载node.js 2.在自己的电脑查看是否下载成功 使用window加r输入cmd使用node -v 查看node.js是否下载成功 3.使用npm下载yarn 注意&#xff1a;因为下载node.js中会自动帮你下载npm&#xff0c; npm install -g yarn 使用yarn -v 如果显示有版本号则下载成功…

vue.js中文官网下载vue.js失败了?

访问vue官网 https://v2.cn.vuejs.org/v2/guide/installation.html下载vue.js&#xff0c;页面直接报错404&#xff0c;只需要切换到英文版&#xff0c;重新下载即可成功。 或者直接访问以下地址: https://v2.vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Includ…

如何下载vue.js

vue官网&#xff1a;https://v2.vuejs.org/ 1、第一步 2、第二步 3、 第三步

idea 下载vue 插件

1.先查看自己的idea 的版本 2.然后去官网 https://plugins.jetbrains.com/plugin/9442-vue-js/versions 下载跟自己idea 版本对应的vue插件 一定要对应不然 报版本不对应问题 类似于&#xff1a; 下载完之后 把文件放在 相应位置 我是放在了idea的插件位置 一般是在 idea的…

Vue.js的下载和调用

Vue支持双向绑定&#xff0c;非常不错。将视图层和模型层分离开。是基于MVVM模型&#xff0c;模型-视图-视图模型 。支持ES6。 目录 一、在官网下载vue.js文件 二、声明Vue对象 三、Vue修饰符 1. v-once。 使{{}}内的值不能被修改 2.v-pre 。{{}}将不会被Vue替换&#xff0c…

操作系统课后答案第三章

**操作系统课后答案**第三章 处理及调度与死锁 1、高级调度与低级调度的主要任务是什么? 为什么要引入中级调度? 答&#xff1a;高级调度的主要任务&#xff1a;用于决定把外存上处于后背队列中的哪些作业调入内存&#xff0c;并为它们创建进程&#xff0c;分配必要的资源&am…

第1章 操作系统引论课后答案

第1章 操作系统引论 1.1 简答题参考答案 1&#xff0e;在计算机系统上配置 OS&#xff08;operating system&#xff0c;操作系统&#xff09;的目标是什么&#xff1f;作用主 要表现在哪几个方面&#xff1f; 【参考答案】在计算机系统上配置OS&#xff0c;主要目标是实现&a…

操作系统解答题

操作系统 **1.平均等待时间问题****2.同步互斥问题****3.分页系统地址转换****4.LRU&#xff08;最近最久未使用&#xff09;置换算法**5.银行家算法 1.平均等待时间问题 有5个进程P1&#xff0c;P2&#xff0c;P3&#xff0c;P4&#xff0c;P5&#xff0c;它们同时依次进入就…

操作系统习题(有答案)

最近在学习os在网上找到的很好的资料&#xff0c;希望对大家有用~ 第1章 一、填空 1&#xff0e;计算机由 硬件 系统和 软件 系统两个部分组成&#xff0c;它们构成了一个完整的计算机系统。 2&#xff0e;按功能划分&#xff0c;软件可分为 系统 软件和 应用 软件两种。 3&am…

【《操作系统慕课版》合集】期末复习 + 核心算法整理 + 课后答案

所有章节归类好了概念、算法&#xff0c;同时课后的简答题也一并给出了答案。祝各位复习愉快~ 整理不易希望能点个赞~ 目录 第一章 操作系统概述 第二章 进程的描述与控制 第三章 处理机调度与死锁 第四章 进程同步 第五章 存储器管理 第六章 虚拟存储器 第七章 输入输…

计算机操作系统习题

作业一 操作系统的主要功能有&#xff08; &#xff09;。 &#xff08;3.0分&#xff09; A、进程管理、存储器管理、设备管理、处理机管理 B、虚拟存储管理、处理机管理、进程管理、文件管理 C、处理机管理、存储器管理、设备管理、文件管理 D、进程管理、中断管理、设备管理…

【第一章 | 操作系统概述】《操作系统 慕课版》课后答案 + 复习

目录 | 本章概念 | 本章算法 单道批与多道批的图像绘制 利用率的计算与分析 | 课后简答题 | 本章概念 1.OS的作用 作为用户与计算机硬件系统之间的接口 | 计算机系统资源的管理者 | 对计算机资源的抽象。OS的目标是&#xff1a;方便性 有效性 可扩充性 开放性 2.虚拟机…

操作系统原理及应用复习(第2版)大部分课后习题

操作系统原理及应用复习 第一章操作系统概论 1.1 什么是操作系统,有哪些基本功能和特点&#xff1f; 操作系统是覆盖在裸机上的第一层软件,他直接控制,管理各种资源。基本功能&#xff1a; 提供人机接口 命令级接口程序级接口图形界面 管理计算机资源 处理机管理存储管理设备…

TCP头部和封装

TCP在IP数据报中的封装 IP头部 TCP头部 可看到&#xff0c;IP数据报即 P头部协议 TCP报文段&#xff0c;这也称为TCP在IP数据报中的封装。有趣的是&#xff0c;TCP报文段中的数据部分并不是必须的&#xff0c;当一个连接被建立和终止时&#xff0c;交换的报文段只包含了TCP头…

3.2.3 使用tcpdump观察TCP头部信息(补充TCP协议的常用知识)

使用tcpdump观察TCP头部信息和三次握手四次挥手 前言实验开始1. 延迟确认2. 序号&#xff08;seq&#xff09;和确认号&#xff08;ack&#xff09;之间的关系3.TS val和ecr的关系4. TCP状态转移&#xff08;书上p41-p42原话&#xff09;5. FIN_WAIT_2状态(半关闭状态)6. TIME_…