JavaScript implementation of web page screenshot export scheme

Preface

Web page screenshot export is not a very high frequency requirement, but it will also be encountered from time to time. Here is a summary of the system's solutions, and then choose the right one from them.

You can see that the screenshot export has two functions. The first step is to realize the screenshot, and the second step is to realize the export, which is the downloading ability.

Screenshot implementation

First of all, we must understand that normal javascript runs in the browser and does not have the ability to take screenshots. Therefore, if you want to achieve screenshots, you must achieve it through other roundabout schemes, don't talk nonsense, and go to the conclusion directly.

Front-end solution 1 canvas

represents the library html2canvas
There are also Chinese documents

Implementation principle:
html2canvas is an HTML renderer. The screenshots are based on the DOM, so the generated images are not necessarily 100% consistent, because it does not make the actual screenshots, but builds the screenshots based on the information available on the page.
The document introduction is relatively clear, canvas is only to restore the display effect of dom.

According to the implementation principle, it is conceivable that the implementation cost is still relatively high. The dom and css styles need to be parsed, and the css style may not be perfectly mapped to the canvas, and it will also be limited by some restrictions received by the canvas, such as cross-domain resource issues. .

Front-end solution 2 svg

represents the library dom-to-image
upgraded version of dom-to-image-more

Implementation principle:
The core element is a feature of SVG that allows arbitrary HTML content to be included in the <foreignObject> tag. So in order to render the dom node, the following steps are required:

1. Recursively clone the original DOM node
2. Calculate the style of the node and each child node and copy it to the corresponding clone, and recreate the pseudo-elements, because of course they will not be cloned in any way
3. Embed web fonts, link all css styles to the style tag, and apply to the clone node
4. Embedded image
   Embed the image URL in the <img> element
   Embedded images used in background CSS properties, in a manner similar to fonts
5. Serialize the cloned node to XML
6. Wrap the XML into the <foreignObject> tag, then wrap it in the SVG, and then make it a data URL
7. Create an Image element with SVG as the source, and render it on the off-screen canvas that you have also created, and then read the content from the canvas

Well, this is implemented in the svg method. Like the canvas method, we need to deal with dom, css and resources, but the subsequent rendering and rendering work is handed over to the browser, so a lot of work and code are reduced.

Server-side solution

Representative way puppeteer realizes
Puppeteer is a Node library that provides a high-level API to control Chromium or Chrome through the DevTools protocol. I won't introduce it here, we only use its screenshot function.

This is the real screenshot capability, and there is a demo on the official website.

Considering that the pages of the business layer require user access rights, the correct steps should be:

1. Start a node service and use puppeter to achieve screenshot capabilities
2. The client initiates a request, carrying a cookie
3. The service started in the first step processes this request, generates a picture, and returns the address to the client
4. The client gets the picture resource and downloads it

Compared

html2canvas

advantage

Simple page screenshot effect is OK, compatibility is good

shortcoming

• Some styles cannot be supported
• The complicated page is horrible.
• Cors can solve cross-domain, but the actual application is still full of problems
• The implementation is very complicated and difficult to change

Almost unusable in our project

dom-to-image

advantage

• Simple to implement, you can modify the source code after downloading
• Good reduction, especially chrome support is very good

shortcoming

• Safari support is not very good, but some problems can be solved (canvas node will export blank, if you use a drawing engine, it is recommended to convert to svg engine drawing)
• ie, edge cannot be used

Basically support business needs

Backend screenshot

advantage

• Real screenshots, the ultimate solution, no compatibility issues

shortcoming

• The implementation process is slightly cumbersome
• Need to consider user authority authentication

Export implementation

Export is to download the file to the local

a tag

The principle is to realize the download through the download attribute of the a tag.

// 基本使用
<a href="/images/xxxxx.jpg" download="filename">

// 脚本触发
const download = (filename, url) => {
    let a = document.createElement('a'); 
    a.style = 'display: none'; // 创建一个隐藏的a标签
    a.download = filename;
    a.href = url;
    document.body.appendChild(a);
    a.click(); // 触发a标签的click事件
    document.body.removeChild(a);
}

blob file stream object

This requires the support of the server to initiate a request, the server returns the data stream, and then the front end triggers the download.
I won’t say much about it, there are many articles on the Internet.

Here are a few packaged download file libraries recommended here
downloadjs
file-saver