html2canvas - Screenshots with JavaScripthttps://html2canvas.hertzen.com/了解一下,安装先
npm install --save html2canvas
用到的知识包括
<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>
扩展阅读:如何复制图片到剪贴板?