如何实现vue导出网页为图片

 

 

1、准备一个vue 的项目安装依赖

npm install html2canvas --save

2、引入依赖

import html2canvas from 'html2canvas';

3、加入导出方法

<div @click="downloadImg('main')">导出图片</div>
<div id="main">
    此区域的所有代码渲染的效果都会导出
</div>

methods: {
            dataURLToBlob(dataurl) {
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], {type: mime})
            },
            //name 为div的id 名称，会把id 下面的所有标签渲染出的页面效果导出
            downloadResult(name) {
                let ca