前端将页面转化为图片---进行下载导出、打印等功能
1.需要实现一个将div页面的东西导出,使用到了html2canvas
官网:
配置型 | HTML2CANVAS 中文文档 (allenchinese.github.io)
2.下载html2canvas
npm install --save html2canvas
3.导入使用到的页面
import html2canvas from 'html2canvas'
4.创建图片基础应用
主要代码:
creatImg() {const setup = {useCORS: true, // 使用跨域};html2canvas(this.$refs.pictureAll, setup).then((canvas) => {this.url = canvas.toDataURL("image/jpg");//生成的图片路径// this.exportPicture(link, "文件名");});},
<template><div id="app"><el-button @click="creatImg">生成图片</el-button><div ref='pictureAll'>hgjgjdd我顶顶顶</div><img :src="url" alt=""></div>
</template><script>
import html2canvas from 'html2canvas'
export default {name: 'App',components: {HelloWorld},data(){return {url:'',}},methods:{creatImg() {const setup = {useCORS: true, // 使用跨域};html2canvas(this.$refs.pictureAll, setup).then((canvas) => {this.url = canvas.toDataURL("image/jpg");//生成的图片路径// this.exportPicture(link, "文件名");});},}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
其他属性:
data-html2canvas-ignore:添加这个属性,生成图片的时候回忽略此部分,在想忽略的标签直接添加这个属性即可,例如:
<div data-html2canvas-ignore style="width:100%;height:20px;background:red" @click="test">gfdgdf</div>
相关文章:
前端将页面转化为图片---进行下载导出、打印等功能
1.需要实现一个将div页面的东西导出,使用到了html2canvas 官网: 配置型 | HTML2CANVAS 中文文档 (allenchinese.github.io) 2.下载html2canvas npm install --save html2canvas 3.导入使用到的页面 import html2canvas from html2canvas 4.创建图片基础应用 …...
docker安装code-service在线开发vscode工具及node版本过低问题
docker安装code-service 拉去镜像 docker pull codercom/code-server创建项目存放映射路径 mkdir /data/code-service/project运行 这里不唯一,但注意密码 docker run -itd --name code-service -u root -p 1024:8080 -v /data/code-service/project:/home/cod…...
C++ 多态深入解析
文章目录 前言一、什么是多态二、如何实现多态三、代码讲解四、静态联编,动态联编总结 前言 在C编程中,多态性(Polymorphism)是一种重要的概念,它允许基于对象的实际类型来调用不同的函数。多态性提供了灵活性和可扩展…...
C#使用EmguCV播放视频
目录 一、前言 1、简介 2、测试工程代码下载链接 3、EmguCV 库文件下载链接 二、工程环境配置 1、EmguCV控件添加引用 (1)窗口控件添加 (2)相关Dll文件添加添加引用 (3)工程运行基础文件夹添加 &a…...
LeetCode150道面试经典题-买卖股票的最佳时机(简单)
1、题目 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交易中获取的…...
【积水成渊】CSS磨砂玻璃效果和渐变主题色文字
大家好,我是csdn的博主:lqj_本人 lqj_本人_python人工智能视觉(opencv)从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了: https://blog.csdn.net/lbcyllqj/category_12346639.html?spm1…...
JVM、JRE、JDK三者之间的关系
JVM、JRE和JDK是与Java开发和运行相关的三个重要概念。 再了解三者之前让我们先来了解下java源文件的执行顺序: 使用编辑器或IDE(集成开发环境)编写Java源文件.即demo.java程序必须编译为字节码文件,javac(Java编译器)编译源文件为demo.class文件.类文…...
input 标签的 type 属性有哪些值?分别表示什么意思?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ type值以及作用⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端…...
(十五)大数据实战——hive的安装部署
前言 Hive是由Facebook开源,基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提供类SQL查询功能。本节内容我们主要介绍一下hive的安装与部署的相关内容。 正文 上传hive安装包到hadoop101服务器/opt/software目录 解…...
MySQL安装和卸载
1.MySQL概述 MySQL概述 MySQL是一个[关系型数据库管理系统],由瑞典MySQL AB 公司开发,2008年被sun公司收购, 2009sun又被oracle收购,所以属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用…...
ELK、ELFK日志分析系统
菜单一、ELK简介1.1 ELK组件说明1.1.1 ElasticSearch1.1.2 Kiabana1.1.3 Logstash 1.2 可以添加的其它组件1.2.1 Filebeat1.2.2 缓存/消息队列(redis、kafka、RabbitMQ等)1.2.3 Fluentd 1.3 为什么要用ELK1.4 完整日志系统的基本特征1.5 ELK 的工作原理 …...
JVM基础篇-StringTable
StringTable 特性 常量池中的字符串仅是符号,第一次用到时才变为对象 利用串池的机制,来避免重复创建字符串对象 字符串变量拼接的原理是 StringBuilder (1.8) 字符串常量拼接的原理是编译期优化 可以使用 intern 方法&#…...
探秘手机隐藏的望远镜功能:开启后,观察任何你想看的地方
当今的智能手机不仅仅是通信工具,它们蕴藏着各种隐藏的功能,其中之一就是让你拥有望远镜般的观察能力。是的,你没有听错!今天我们将探秘手机中隐藏的望远镜功能,这项神奇的功能可以让你打开后,轻松观察任何…...
正运动亮相2023半导体设备材料与核心部件展示会,助力半导体产业高速高精应用
■展会名称: 第11届(2023)半导体设备材料与核心部件展示会 ■展会日期 2023年8月9日-11日 ■展馆地点 无锡太湖国际博览中心A6馆 ■展位号 A6-A361 正运动技术,作为国内领先的运动控制企业,将于2023年8月9日参加…...
如何在MongoDB中添加新用户
如何在MongoDB中添加新用户? MongoDB是一款流行的NoSQL数据库,它的可扩展性强,可进行分布式部署,且具有高可用性。其许多优势使得越来越多的企业和组织选择MongoDB作为其数据库系统。本文将介绍如何在MongoDB中添加新用户。 第一步…...
幻读怎么复现
大家好,我是想想。 很久没有给大家分享技术了,主要在计划一些事情,几乎没什么时间爽文了。 今天从实操上实现了MySQL事务隔离复现问题,就记录分享给大家吧。 正文 我们知道,著名的四大事务特性ACID特性 Atomicity…...
无脑入门pytorch系列(二)—— torch.mean
本系列教程适用于没有任何pytorch的同学(简单的python语法还是要的),从代码的表层出发挖掘代码的深层含义,理解具体的意思和内涵。pytorch的很多函数看着非常简单,但是其中包含了很多内容,不了解其中的意思…...
ansible-kubeadm在线安装高可用K8S集群v1.19-v1.20版本
ansible可以安装的KS8版本如下: 请按照此博客中的内容操作后,才可以通过下面的命令查询到版本。 [rootk8s-master01 ~]# yum list kubectl --showduplicates | sort -r kubectl.x86_64 1.20.0-0 kubern…...
Cesium entity 渐隐渐显、闪烁
点entity function f2(){var x1;var flogtrue;//闪烁//var x0;var flogfalse;//渐显viewer.entities.add({name:"圆点point闪烁",position:Cesium.Cartesian3.fromDegrees(116.200.03,39.530.03,0),point : {show : true, // defaultcolor :new Cesium.CallbackProp…...
LISA:通过大语言模型进行推理分割
论文:https://arxiv.org/pdf/2308.00692 代码:GitHub - dvlab-research/LISA 摘要 尽管感知系统近年来取得了显著的进步,但在执行视觉识别任务之前,它们仍然依赖于明确的人类指令来识别目标物体或类别。这样的系统缺乏主动推理…...
别再死记硬背BPSK公式了!用Python+NumPy手把手带你仿真2PSK信号生成与解调全过程
用Python实战BPSK:从信号生成到误码率分析的完整指南 通信工程专业的学生常常被各种调制公式搞得晕头转向,尤其是BPSK(二进制相移键控)这类基础但抽象的概念。今天,我们将彻底改变这种学习方式——通过Python代码和可视…...
蓝桥杯备赛避坑指南:从校赛落选到国三逆袭的实战经验分享
蓝桥杯备赛避坑指南:从校赛落选到国三逆袭的实战经验分享 第一次参加蓝桥杯校赛时,我连最简单的编程题都没能完整写出。看着屏幕上仅完成的两道签到题和一堆未通过的测试用例,那种挫败感到现在都记忆犹新。但正是这次失败,让我后来…...
哔哩下载姬DownKyi完整指南:三步掌握B站8K视频下载
哔哩下载姬DownKyi完整指南:三步掌握B站8K视频下载 【免费下载链接】downkyi 哔哩下载姬downkyi,哔哩哔哩网站视频下载工具,支持批量下载,支持8K、HDR、杜比视界,提供工具箱(音视频提取、去水印等ÿ…...
Kook Zimage真实幻想Turbo快速调试:找到属于你的幻想风格黄金参数组合
Kook Zimage真实幻想Turbo快速调试:找到属于你的幻想风格黄金参数组合 1. 认识Kook Zimage真实幻想Turbo Kook Zimage真实幻想Turbo是一款专为个人GPU设计的轻量化幻想风格图像生成系统。它基于Z-Image-Turbo极速文生图底座,通过独特的权重融合技术&am…...
别再踩坑了!手把手教你搞定vllm、nccl、cuda和python的版本匹配(附版本对照表)
深度学习环境配置避坑指南:vLLM与CUDA生态的版本兼容性实战 在部署大型语言模型推理服务时,vLLM因其高效的内存管理和推理优化成为热门选择。但许多开发者第一次接触vLLM时,往往会被复杂的依赖关系搞得焦头烂额——NCCL版本不匹配、CUDA驱动…...
SJA1105Q升级踩坑记:RGMII V2.0时序下,33Ω串阻为何成了千兆通信的‘隐形杀手’?
SJA1105Q升级中的RGMII V2.0时序陷阱:33Ω串阻如何摧毁千兆通信稳定性 当NXP SJA1105Q这款号称"增强版"的工业交换机芯片落到我们硬件工程师手中时,谁曾想PCB上那些看似无害的33Ω小电阻,竟会成为千兆通信系统的阿喀琉斯之踵。这不…...
Easy-Scraper:用 Rust 重新定义网页数据采集的效率边界
Easy-Scraper:用 Rust 重新定义网页数据采集的效率边界 【免费下载链接】easy-scraper Easy scraping library 项目地址: https://gitcode.com/gh_mirrors/ea/easy-scraper 当你需要从网页中提取数据时,是否遇到过这些困境:写了 200 行…...
多模态数据挖掘前沿:生物医学与情感分析领域论文深度解析
多模态数据挖掘前沿:生物医学与情感分析领域论文深度解析 在人工智能与大数据技术飞速发展的当下,多模态数据因能更全面、立体地刻画研究对象,已成为科研领域的核心研究方向。本文将深度解析两篇聚焦多模态数据挖掘的重磅论文——《多模态生物…...
破解B站评论区识人困境!B站成分检测器让用户画像识别效率飙升8倍
破解B站评论区识人困境!B站成分检测器让用户画像识别效率飙升8倍 【免费下载链接】bilibili-comment-checker B站评论区自动标注成分,支持动态和关注识别以及手动输入 UID 识别 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-comment-checke…...
网易云音乐评论数据分析:用Python爬取+可视化热门歌曲情感倾向
网易云音乐评论数据挖掘:从爬取到情感分析的完整实战指南 音乐平台的用户评论蕴含着丰富的情感价值和商业洞察。作为国内领先的音乐社区,网易云音乐的海量评论数据对产品经理优化功能、市场人员分析用户偏好具有重要价值。本文将系统性地介绍如何通过Pyt…...
