html2canvas将document DOM节点转换为图片,并下载到本地

简介: html2canvas将document DOM节点转换为图片,并下载到本地


image.png

了解一下,安装先

npm install --save html2canvas

用到的知识包括

image.png

用例代码

<template>
    <div>
        <el-button type="primary" ref="btn" @click="downloadImg({ dom: $el, fileName: '自定义图片名称.png' })">下载当前网页</el-button>
    </div>
</template>
<script>
import html2canvas from 'html2canvas'; // npm install --save html2canvas (官网:https://html2canvas.hertzen.com)
export default {
    methods: {
        downloadImg({ dom, fileName = '', fileType = 'image/png', quality = 1.0 } = {}) {
            html2canvas(dom, { width: dom.scrollWidth, height: dom.scrollHeight, }).then(canvas => { let a = document.createElement('a'); a.download = fileName, a.href = canvas.toDataURL(fileType, quality), a.click(); });
        },
    }
};
</script>

扩展阅读:如何复制图片到剪贴板?

image.png


相关文章
N..
|
1月前
|
XML JavaScript 数据格式
DOM编程中的Document对象
DOM编程中的Document对象
N..
15 0
|
3月前
|
XML JavaScript 数据格式
DOM中的节点分为哪几种几类型
DOM中的节点分为哪几种几类型
31 0
|
26天前
|
移动开发
uni-app使用v-html输出富文本图片溢出解决
uni-app使用v-html输出富文本图片溢出解决
39 1
|
1天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
11 1
|
2天前
在线拼接图片工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。 无需本地安装软件。 下载时,使用日期时间作为文件名, 规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
2 0
在线拼接图片工具HTML源码
|
25天前
|
JavaScript 前端开发 开发者
DOM节点类型
DOM节点类型
10 0
|
1月前
|
UED
12.使用HTML制作交互图片
12.使用HTML制作交互图片
19 0
|
1月前
|
Web App开发 前端开发 iOS开发
编程笔记 html5&css&js 008 HTML图片
编程笔记 html5&css&js 008 HTML图片
|
2月前
|
JavaScript 前端开发
HTML DOM 集合(Collection)
HTML DOM 集合(Collection) 是用于表示和操作 HTML 文档的树状结构的数据结构。DOM 代表文档对象模型(Document Object Model),它是 HTML 文档的树状结构表示,允许通过 JavaScript 编程语言来访问和修改 HTML 文档的内容、结构和样式。
37 7
|
3月前
|
JavaScript 前端开发
JavaScript:DOM节点
JavaScript:DOM节点
22 0