Html2canvas screenshot Blank question

Recently encountered a requirement in the project, need to provide the function of the webpage. Baidu found Html2canvas very useful. Then try it.

Resources

Plugin: Html2canvas

How to use

The React component development method used by the project. Refer to the official documentation getting-started.md and follow these steps:
1. Install with the following command
NPM Install Html2canvas--save
2. Introduction of Html2canvas in documents
Import Html2canvas from ' Html2canvas ';
3, the use of the file
Html2canvas (document.body). Then (function (canvas) {
Document.body.appendChild (canvas);
});

Problems encountered

In this way, the page does not have scroll bar is OK, there are scroll bars when there is a large space.
The error is as follows:

Solution Solutions

Take a closer look at the analysis of Configuration.md and netizens, and finally solve. The code snippet is as follows

The previous one is correct as follows:

Description of the configuration item in the code

1, the blank is due to the problem of container height setting, the height of setting windowheight is equal to the height of the page contains scroll bar to get the content in the scroll bar. This article can solve the problem of blank.
2, set the width, Height property is because we display in the page width and height is fixed, is the current screen visible area.
3, set the x, Y coordinate because the page in the scroll bar, you need to specify the starting position. There is no scrollbar in the x-axis direction in this project, so it is set to zero and the Y-direction has scroll bars, so you need to get the scrolling coordinates of the current direction.
4, the General page will have the picture, the picture has the link address, the setting Allowtaint property can guarantee the picture loading.

Html2canvas Blank question