vue - html2canvas 将页面表单数据保存为图片下载（可以定义成对象再调用）1.1

目录

前言

图片转化下载

html页面转化成图片

图片直接下载

方法合并

抽象成对象去调用

Brower对象（brower.js）

最终效果

参考文章

总结

---

• 前言

我们在手机中经常会看到，长按页面会有一个图片保存的功能，那么将html页面转化成图片，并且下载是如何实现的呢？

• 图片转化下载

• html页面转化成图片

1. 1 第一步：html页面转化成图片

首先我们要用到html2canvas.js

npm install html2canvas –save

如果是vue工程则直接安装，如果不是vue工程，可以在其他vue工程中安装，然后在node_modules中找到对应的js复制到自己的工程中，而我是非vue工程走的是后者，如下图所示：

我将js放到对应的工程目录下，然后开始写代码：

1. 1 定义生成数据范围 

1.  2 新增createImg按钮

<el-button size="mini" type="primary" @click="createImg()">图片生成 </el-button>

1.  3 实现createImg方法（这里我定义了一个ImageUrl变量在data里面）

createImg(){
	html2canvas(this.$refs.imageWrapper).then(canvas => {
		let dataURL = canvas.toDataURL("image/png");
		console.log(dataURL)
		if (dataURL !== "") {
			this.imageUrl = dataURL;
		}
	});
},

1.  4 测试结果

现在我们面临的问题是，怎么不是通过在其他页面，另存为保存上述的图片呢？

可能我们想到的是直接下载，却发现Not allowed to navigate top frame to data URL。

1. Not allowed to navigate top frame to data URL
2. 想利用download标签去下载，却发现a标签的 download属性不生效
3. 后者将imageUrl生成转化到后端去，但是就需要新增接口了

• 图片直接下载

1. 1 新增下载按钮

<el-button size="mini" type="primary" @click="downloadImg()">下载 </el-button>

1. 2 实现downloadImg 方法，直接将路径放进去

downloadImg(){
	var img = this.imageUrl;
	var alink = document.createElement("a");
	alink.href = img;
	alink.download = "downloadName.png";
	alink.click();
},

1. 3 效果图

• 方法合并

1. 1 直接下载

<el-button size="mini" type="primary" @click="createImg()">下载数据 </el-button>

1. 2 createImg方法改造

createImg(){
	html2canvas(this.$refs.imageWrapper).then(canvas => {
		let dataURL = canvas.toDataURL("image/png");
		console.log(dataURL)
		if (dataURL !== "") {
			// this.imageUrl = dataURL;

			// var img = this.imageUrl;
			var img = dataURL;
			var alink = document.createElement("a");
			alink.href = img;
			alink.download = "downloadName.png";
			alink.click();
		}
	});
},

1. 3 效果图 

• 抽象成对象去调用

• Brower对象（brower.js）

 

如果把它抽象成对象去调用，对象里面的方法，就不需要每个页面都写一遍了，更方便快捷，值得注意的是如果定义成对象调用则不能使用 ref 的形式，可以将方法改成如下：

createImg(){
	let hb = document.querySelector("#imgdownload");

	html2canvas(hb).then(canvas => {
		let dataURL = canvas.toDataURL("image/png");
		console.log(dataURL)
		if (dataURL !== "") {
			var img = dataURL;
			var alink = document.createElement("a");
			alink.href = img;
			alink.download = "downloadName.png";
			alink.click();
		}
	});
},

然后改写成对象的形式调用：

1. 1 brower.js

/**
 * 数组操作
 * 引入：1、<script th:src="@{~/js/utils/brower.js}"></script>
 * 使用：2、const a = Brower().contain("demo")(和计算要利用到Uri.js)
 */
(function (global) {
    'use strict';// PS:未声明的变量不能使用
    var Brower,

        NAME = '[brower.js] ',//特意指明可以实现直接跳转
        P = {};


    function _Brower_() {
        function Brower() {
            var x = this;
            if (!(x instanceof Brower)) return new Brower()
            x.constructor = Brower;
        }

        Brower.prototype = P;
        return Brower;
    }

    /**
     * 浏览器页面数据转化成图片形式下载
     * 1、<script th:src="@{'~'+${subDomainUrl}+'js/utils/html2canvas.js'}"></script>
     * 2、定义下载数据范围的id（imgdownload）
     [<div id="imageWrapper" "class="baseList">
            <el-form ref="form" :model="nzzwba" label-width="200px" ]
     * 父页面新增下载按钮
     * 3、
     */
    function dataImage(downloadName){
        let hb = document.querySelector("#imgdownload");// 下载画布

        html2canvas(hb).then(canvas => {
            let dataURL = canvas.toDataURL("image/png");
            console.log(dataURL)
            if (dataURL !== "") {
                var img = dataURL;
                var alink = document.createElement("a");
                alink.href = img;
                alink.download = downloadName+".png";
                alink.click();
            }
        });
    }
	
    P.dataImage = function (downloadName) {
        return dataImage(downloadName)
    };

    Brower = _Brower_();
    Brower['default'] = Brower.Brower = Brower;

    if (typeof define === 'function' && define.amd) {
        define(function () {
            return Brower;
        });
    } else if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
        module.exports = Brower;
    } else {
        global.Brower = Brower;
    }
}(this));

1. 2 vue页面 methods 调用

createImg(){
	
	Brower().dataImage("未备案农转征项目信息");
	
},

1. 3 IDEA代码展示

• 最终效果

• 参考文章

1. H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报
2. Vue使用html2canvas将页面转化为图片(ref去获取下载范围)
3. html2canvas在vue下的巨坑(id去获取下载范围)

• 总结

现在我们就可以在调用的页面，通过一句话

Brower().dataImage("未备案农转征项目信息");

来实现当前页面数据下载到电脑啦！！！(*^__^*) 嘻嘻