Table of contents
In our daily development scenarios, form printing is a relatively common scenario. The Wi-Fi itself does not have a printing function. We need a third-party library to achieve printing.
1 Introducing third-party libraries
If you need to introduce a third-party library in the micro-build, you need to open the application you are in, navigate to the last menu in the sidebar of the application editor, and enter the
address of our third-party library
https://html2canvas.hertzen.com/dist/html2canvas.min.js
Make sure the address is accessible when importing the library
Friends who are familiar with front-end development may be more accustomed to using npm for installation. Microbuild does not support the form of npm, and can only import external js
2 Build the page
When we print, we usually use it on the PC side, so we need to choose the PC mode when building. The
printing scene is usually on the viewing page. Our viewing page can be completed using a form container. We choose to view the scene of the form container. For the convenience of the demonstration, we need to set an ID
and the other is to set the printing area. The principle of the html2canvas library is to take a photo of the page. Which area is more suitable for us to take?
Because of the different sizes of computer screens, some are wider and some are narrower, so we set the width of our printing area to 1080
In order to achieve this effect, we set two layers of ordinary containers as the layout for the form container. For the first layer, we make the page fill the screen, and the second layer is to set a fixed width in the printing area.
In the first layer, we set our internal elements to be arranged horizontally and centered
The second layer container sets a fixed width
3 Realize printing
After the printing area is set, we need to define a method to call our third-party library
We set a custom method for the print button, named print, and
enter the following code in the print method
export default async function({
event, data}) {
const element = document.querySelector(`#container6`) // 选择到要打印的组件id或者class，转换为canvas，其中 idXXX 表示要打印的元素
if(!element) {
throw new Error('要打印的内容不存在')
}
const {
width, height } = element.getBoundingClientRect()
const canvas = await window.html2canvas(element)
// 打印
let winPrint = window.open('', '', `left=0,top=0,width=${
width},height=${
height},toolbar=0,scrollbars=0,status=0`);
winPrint.document.body.appendChild(canvas);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
First, you need to select the area to print. We are setting up the second normal container. You need to select the ID of the container.
const element = document.querySelector(`#container6`)
After the print area is set, we need to get the width and height of the element
const {
width, height } = element.getBoundingClientRect()
Students who are not familiar with JS grammar may not understand this very well. This is called deconstruction assignment. Through structural assignment, the return value obtained by the method called on the right is assigned to the two variables width and height on the left.
Here we are deconstructing objects, assigning objects to attributes respectively, and if you read the official template, you will also see the deconstruction of arrays
const canvas = await window.html2canvas(element)
This line of code is equivalent to setting the obtained print element to our canvas, and the rest of the code is to call the print function of the browser
4 Realize the effect
After the code is set, we click the preview function, and then click the print button to see the specific effect
Summarize
This article takes everyone to realize the function of form printing. The form printing needs to be in the PC environment, and the printing area must be correctly set and the html2canvas library is called to realize it. Students who need it can practice it according to the tutorial.