html2canvas user guide

 

Problem Description

In a recent project, it is necessary to download the content in the webpage into a picture, and save the page by clicking a button, so that colleagues can use it for work reports. As shown in the picture:

---

solution:

Then I thought of html2canvas , which can solve the problem I am encountering now. I quickly downloaded the js file from the official website, here is the link:

 

http://html2canvas.hertzen.com/

 Here  html2canvas provides us with three methods. Due to project limitations, I can only download the html2canvas.js  file locally.

---

Detailed code:

1. First, we import the js file:

<script type="text/javascript" src="${jsPath}/html2canvas/html2canvas.js"></script>

Here I am a jsp project file. Friends, pay attention to your own path problems when introducing js files to avoid low-level mistakes.

2. Then customize a class name for the webpage content to be downloaded. For example:

<div id="ajax_list">正在加载列表，请稍后……</div>

3. Write the trigger button, click the button, and download the content in "#ajax_list".

<button class="button button-primary" onclick="uploadImg();">一键下载</button>

4. Write the js code and   write the uploadImg() method. Or go directly to the code!

// 这是按钮触发事件
function uploadImg(){
	html2canvas(document.querySelector("#ajax_list")).then(canvas => {
        document.body.appendChild(canvas)
        let imageURL = canvas.toDataURL("image/png");    
        //canvas转base64图片，这里我们将base64图片进行下载到本地就可以了
		savePic(imageURL);
    });
}
// 下载方法
function savePic(base64) {
	var arr = base64.split(',');
	var bytes = atob(arr[1]);
	let ab = new ArrayBuffer(bytes.length);
	let ia = new Uint8Array(ab);
	for (let i = 0; i < bytes.length; i++) {
		ia[i] = bytes.charCodeAt(i);
	}
	var blob = new Blob([ab], { type: 'application/octet-stream' });
	var url = URL.createObjectURL(blob);
	var a = document.createElement('a');
	a.href = url;
	a.download = new Date().valueOf() + ".png";
	var e = document.createEvent('MouseEvents');
	e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	a.dispatchEvent(e);
	URL.revokeObjectURL(url);
	
}

---

question:

1. When we click and run the above code, we find that every time we execute  the uploadImg() method, a <canvas> tag  will be generated in our page  . Here we  write the following code at the end of the uploadImg()  method. After each time we get the image in base64 format, we remove the  <canvas>  tag in the dom.

document.body.removeChild(canvas)

It becomes like this:

function uploadImg(){
	html2canvas(document.querySelector("#ajax_list")).then(canvas => {
        document.body.appendChild(canvas)
        let imageURL = canvas.toDataURL("image/png");    //canvas转base64图片
		savePic(imageURL);
		document.body.removeChild(canvas)
    });
}

Click the "One-click download" button again to run, and it will be successful!

---

When using  html2canvas  , pay attention to:

1. Use the position attribute in css , pay attention to the level problem, you need to write the level clearly, and use z-index to solve it, otherwise it will cause confusion in the page level.

2. The transform attribute is used in css , and html2canvas  is not compatible with this attribute. When saving,  the label using the transform attribute will become invalid. It is recommended not to use it or replace it with a picture.

3. When saving the page content, if you need to use the background image, please use the <img> tag instead of the background-image attribute. html2canvas  is not compatible with this attribute, please pay attention to the replacement.

That's all for the time being, if there is any other content in the future, I will add it, welcome friends to point out! ! !