This time I will show you how the jquery plug-in prints the page content. How the jquery plug-in prints the page content. What are the precautions? The following is a practical case, let’s take a look.
Business Scenario
The customer needs to have a print button on the page. After clicking it, the content of the Echarts chart and the text prompt information can be printed. Through Google Search found that there are about three implementation methods, the other two are not familiar, and the printing method used is a print plug-in developed based on jQuery, so you can use jQuery to find elements, so I decided to use this way.
Let’s take a look at the implementation renderings, as follows:
Implementation renderings
Introducing js files
1 2 |
|
Note: Here is the jQuery file introduced first. If the jQuery file is not introduced first, If there is a js file, there will be compatibility issues, resulting in an error when printing using jqprint.
html page
There are html tags inside There are many
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
Of course there are also below Many html tags are not shown here.
Function executed after the print button is clicked
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
|
Notes:
The image scaling method is used here. For example, if the Echarts chart needs to display a lot of content, generally the scroll bar is used on the Just restore it again.
Any labels that do not need to be printed can be hidden first. For label content that does not need to appear on the printed page, we use jQuery to find the corresponding element before printing, hide the element, and then display the hidden element after printing.
I believe you have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
How jQuery runs the page to trigger click events by default
In jquery How to use on and click
How to pass parameters between windows in the layui pop-up window
The above is the detailed content of How to print page content with jquery plug-in. For more information, please follow other related articles on the PHP Chinese website!