vue 使用 html2canvas 截屏并下载图片至本地(重点兼容ie浏览器)

安装html2canvas:

npm install --save html2canvas

注意:如果是某些原因不能npm的话就直接把依赖包拷贝到node_modules就可以啦

html:

<div class="details-box" v-show="detailsFormShow"><div class="details-inner"><!-- 截图区域 --><div ref="cutImageBox">…………</div><!-- 按钮部分 --><div class="btns"><el-buttontype="primary"@click="saveImage"size="small"style="margin-right: 30px">保存为图片</el-button><el-button type="primary" @click="detailsFormShow = false" size="small">关闭</el-button></div></div></div>

script:

引入html2canvas

import html2Canvas from "html2canvas";

methods:

重点:这个方法除了ie浏览器基本都支持,但在ie是不能用的

//保存图片这个方法除了ie浏览器基本都支持saveImage() {// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等html2canvas(this.$refs.creditQrCodeShare, {backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色(null)useCORS: true, //支持图片跨域scale: 1, //设置放大的倍数}).then((canvas) => {// 把生成的base64位图片上传到服务器,生成在线图片地址let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64this.imgUrl = url;//将图片下载到本地console.log(url,67)let a = document.createElement("a"); // 生成一个a元素let event = new MouseEvent("click"); // 创建一个单击事件a.download = name || "截图名称"; // 设置图片名称没有设置则为默认a.href = this.imgUrl; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件});},

在网上查了好多资料好多是说用这个方法IE浏览器可以用,但我试了是不行的:

if (userAgent.includes("Trident")) {let arr = image.split(',');let mime = arr[0].match(/:(.*?);/)[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}window.navigator.msSaveBlob(new Blob([u8arr], {type: mime}), `${value}.jpg`);}

重点:想要在ie浏览器上用这个html2canvas来将html保存为图片并且在本地保存就要让后端来配合让其转为文件流来下载保存。可能写的有点儿乱,但如果是发现IE浏览器不能下载图片就跟后端商量用这个方式,其他的方法我都试过了都没用

1.//让后端写一个接口,你给它传`this.imgUrl`   转为base64位的参数。const htrs = window.location.hostconst pste = window.location.protocolconst newRowder = `${pste}//${htrs}${baseURL}/ieriepf/sdfjjfbase64`let aLink = document.createElement("a");aLink.href = downloadUrl;aLink.download = `${downloadName}.jpg`;document.body.appendChild(aLink);aLink.click();document.body.removeChild(aLink);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/6879.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

群狼调研(长沙市场调研)|食品安全群众满意度调查方案

本文由群狼调研&#xff08;长沙食品安全满意度调查&#xff09;出品&#xff0c;欢迎转载&#xff0c;请注明出处。设计一个食品安全群众满意度调查方案需要考虑调查目的、样本选择、问题设计、数据收集和分析等多个方面。以下是一个可能的食品安全群众满意度调查方案的概述&a…

AP510X 单路低压差线性恒流芯片 LED手电筒景观亮化台灯车灯照明

AP510X 是一系列电路简洁的单路线性LED恒流芯片&#xff0c;适用于3-60V电压范围的LED恒流调光领域。AP510X采用我司算法&#xff0c;可以实现高精度的恒流效果&#xff0c;输出电流恒流精度≤3&#xff05;&#xff0c;电源供电工作范围为3-40V&#xff0c;可以轻松满足锂电池…

【深度优先搜索 图论 树】2872. 可以被 K 整除连通块的最大数目

本文涉及知识点 深度优先搜索 图论 树 图论知识汇总 LeetCode 2872. 可以被 K 整除连通块的最大数目 给你一棵 n 个节点的无向树&#xff0c;节点编号为 0 到 n - 1 。给你整数 n 和一个长度为 n - 1 的二维整数数组 edges &#xff0c;其中 edges[i] [ai, bi] 表示树中节点…

VMware 虚拟机打开一段时间后卡死,VNX进程CPU占比高

一、问题描述 打开虚拟机后可以正常运行 运行几分钟后突然卡死 然后通过任务管理器可以观察到VMware Workstation VMX应用进程的CPU占比高&#xff0c;CPU也出现异常 关闭虚拟机重新开启&#xff0c;还是一样卡死 二、系统环境 系统: Windows10 VMware: Workstation 17 Pro …

奇门辅助软件v2024.5

废话不说&#xff0c;先上链接 链接&#xff1a;https://pan.baidu.com/s/1_i11lMx4P_vrTs-6lpWoHA?pwd8v1m 提取码&#xff1a;8v1m 功能介绍 【宫内信息】是点击宫内某属性时显示的宫内基本信息。 【古籍宝鉴】是《御定奇门宝鉴》里的对应时局内容&#xff0c;但差补法置…

[Flutter]单元测试和组件测试

1.单元测试 在Flutter开发中&#xff0c;进行单元测试是确保你的代码质量以及未来更改不会破坏现有功能的关键步骤。当你开发私有包时&#xff0c;单元测试尤其重要&#xff0c;因为这有助于保持包的稳定性和可维护性。以下是如何在Flutter中进行单元测试的详细指南&#xff1…

GPT:利用LLM Studio在本地运行语言模型

请关注微信公众号&#xff1a;拾荒的小海螺 博客地址&#xff1a;http://lsk-ww.cn/ 1、简述 随着人工智能和自然语言处理技术的发展&#xff0c;语言模型技术正逐渐成为博客和内容创作领域的重要工具。LLM Studio是一种允许用户在本地环境中运行语言模型的工具&#xff0c;它…

备考2024年小学生古诗文大会:吃透10道历年真题和知识点(持续)

对上海小学生的小升初和各种评优争章来说&#xff0c;语文、数学、英语的含金量较高的证书还是很有价值和帮助的。对于语文类的竞赛&#xff0c;小学生古诗文大会和汉字小达人通常是必不可少的&#xff0c;因为这两个针对性强&#xff0c;而且具有很强的上海本地特色。 今天我…

C语言 | Leetcode C语言题解之第69题x的平方根

题目&#xff1a; 题解&#xff1a; int mySqrt(int x) {long int i 0;for(i0;;i){long int a i*i;long int b (i1)*(i1);if(a < x&&b > x){break;}}return i; }

Redis 整合

1、pom 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency>2、yml 配置 spring:redis:host: 192.168.56.10port: 63793、直接注入 StringRedisT…

【第三版 系统集成项目管理工程师】第2章 信息技术发展(知识总结)

持续更新。。。。。。。。。。。。。。。 【第2章】 信息技术发展 考情分析2. 1信息技术及其发展2.1.1 计算机软硬件-P501.计算机硬件2.计算机软件-P51 2.1.2计算机网络1.通信基础-P522.网络基础-P534.网络标准协议-P543.网络设备-P535.软件定义网络-P576.第五代移动通信技术-P…

input,el-input输入框正则验证输入的非数字转为空

<input οninput"this.valuethis.value.replace(/\D/g,)" maxlength"4" v-model"code" placeholder"请输入验证码" /> <el-input v-model"unboundTel" placeholder"请输入解绑手机号" clearable blur&q…

选择CDN加速器节点网络的因素有哪些?

CDN加速能够将网站的静态资源缓存分布在全球的各地的服务器节点上&#xff0c;当用户进行访问网站时&#xff0c;能够提供一定的资源&#xff0c;以此来减少网络延迟和加载时间&#xff0c;提高网站整体的访问速度。 那么我们在选择CDN 加速器节点网络时应该考虑哪些因素呢&…

霍尼韦尔HONEYWELL 17HM5 微型密封基本开关

微动开关与普通开关的主要区别在于它们的设计和操作特性。以下是微动开关的特点&#xff1a; 微小接点间隔&#xff1a;微动开关的触点间距较小&#xff0c;这使得它们能够提供的开关动作。 快动机构&#xff1a;它们具有快速动作的特性&#xff0c;能够在短的行程内完成接通…

【C++题解】1434. 数池塘(四方向)

问题&#xff1a;1434. 数池塘&#xff08;四方向&#xff09; 类型&#xff1a;深搜 题目描述&#xff1a; 农夫约翰的农场可以表示成 NM个方格组成的矩形。由于近日的降雨&#xff0c;在约翰农场上的不同地方形成了池塘。每一个方格或者有积水&#xff08;W&#xff09;或者…

项目管理-项目沟通管理

项目管理&#xff1a;每天进步一点点~ 活到老&#xff0c;学到老 ヾ(◍∇◍)&#xff89;&#xff9e; 何时学习都不晚&#xff0c;加油 1.项目沟通管理-主要内容 项目沟通管理过程--重点&#xff1a; ①ITTO 输入&#xff0c;输出工具和技术。 ②问题和解决方案。 ③论文…

手机异地组网方案?

现代社会&#xff0c;随着信息技术的快速发展&#xff0c;人们之间的通信需求也日益增加。尤其是在异地工作、异地学习、异地旅游等情况下&#xff0c;我们需要实现不同地区间的快速组建局域网&#xff0c;以解决电脑与电脑、设备与设备、电脑与设备之间的信息远程通信问题。本…

java后端自学错误总结spring持续更新中

java后端自学错误总结 一.SpringBoot--正在总结中1.循环嵌套异常2.项目起来卡住了怎么办 二.SpringCloud--正在总结中 一.SpringBoot–正在总结中 1.循环嵌套异常 今天再写SpringCloud项目的时候书写测试类运行结果报错了报错的最后的信息是 The dependencies of some of th…

【Linux】基于 Jenkins+shell 实现更新服务所需文件 -->两种方式:ssh/Ansible

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

Kotlin注解简介

Kotlin注解 注解&#xff08;Annotations&#xff09;在 Kotlin 中和在 Java 中有类似的地位&#xff0c;它们都是元数据的形式&#xff0c;为代码提供了额外的信息。注解不会直接影响代码的操作&#xff0c;但可以被编译器或者运行时环境用来生成额外的代码、进行类型检查、处…