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


相关文章
|
9月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
377 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
JavaScript 前端开发 编译器
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
388 2