Custom page printing
1. Usage scenarios
The data of the obtained form is displayed on the custom page. To print the displayed data in the custom page display style, see this document. This document describes how to print on a custom page.
2. Video tutorial
3. Procedure
3.1 Step 1: Create a custom page
Prepare container components, button components, and components that you want to print. Place the content to be printed in the container component and set the container component properties.
Figure 3.1 setting container component properties
3.2 Step 2: print implementation
For the beautiful page, the operation columns, top operations, and pagination of the table component are not displayed;
For more information, see:Customize page tables to implement data management page functions;
The button component sets the onclik click action to call the browser when the button is clicked and print the specified area.
Figure 3.2-1 call the printing function of the browser to print the specified area
The following code can be directly copied to the JS panel,Note: You need to replace the unique identifier of the container component.
export function onClick(){
//绘制需要打印的区域为容器组件内的内容
const printPart = document.getElementById('div_ktdxeg0h');
window.document.body.innerHTML = "";
window.document.body.appendChild(printPart);
let oldstr = window.document.body.innerHTML;
//调用print()方法去打印定义的网页区域
window.print();
document.body.innerHTML = oldstr;
location.reload();
}
After the call is completed, there are headers and footers in the custom print preview. You can deselect them and remove them. After removing them, you can choose to save them as pdf.
Figure 3.2-2 set print preview
4 Implementation effect
4.1 custom page printing table component
Figure 4.1 print form content
4.2 custom page printing JSX component
Figure 4.2 custom print style
Custom page setting JSX component style reference document👉:Submit and view custom tables
5. Try it online
For online experience, please go to the Developer Center.👉Custom page printing
https://www.aliwork.com/bench/coe? tplUuid=TPL_YKF11X30VFKJS1OT8BHW
-------------------- Get the latest information YIDA, welcome to follow US--------------------
