Of Stack

web print summary

  • 2021-07-10 18:34:52
  • OfStack

There is a requirement in the project is to move the printing of winform client to the web page and print by the customer himself. The printing requirement is to realize the set printing according to the format set by 1.

The solution was to print using PDF:

1. Prepare the base map of the set format;

2. Open the base map and draw the dynamic content on the bottom map;

3. Generate PDF by using the modified picture in step 2, and complete printing

Later, I found a powerful web printing tool lodop. The simple instructions are as follows:

1. First check whether the browser installs this plug-in:

http://www.lodop.net/demolist/PrintSample1.html

2. Establish html. This entry can open a graphical editing page, and the generated result diagram is as follows: 


<html>
<body>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0></object>
<script>
function myPreview() { 
 LODOP.PRINT_INIT(" Test set-up template ");
 };
</script>
<a href="javascript:;" onclick="javascript:myPreview();LODOP.PRINT_DESIGN();"> Enter template design </a>
</body>
</html>

3. We can make pictures of the documents to be typed, import this graphical interface as a background picture, and then put text boxes and other contents to start the test.

4. After the position positioning is completed, you can click the overall alignment icon in the upper left corner to make unified 1 adjustment.

5. Remove the background image, generate the code, and put it into the JS code segment 


LODOP.PRINT_INIT(" Test set-up template ");
LODOP.ADD_PRINT_TEXT(107,225,338,30," Name of bidder ");
LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
LODOP.ADD_PRINT_TEXT(421,116,209,26," Mobile phone number ");
LODOP.SET_PRINT_STYLEA(0,"FontSize",13);

<html>
<body>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0></object>
<script>
function myPreview() { 
 LODOP.PRINT_INIT(" Test set-up template ");
LODOP.ADD_PRINT_TEXT(107,225,338,30," Name of bidder ");
LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
LODOP.ADD_PRINT_TEXT(421,116,209,26," Mobile phone number ");
LODOP.SET_PRINT_STYLEA(0,"FontSize",13);
 };
</script>
<a href="javascript:;" onclick="javascript:myPreview();LODOP.PRINT_DESIGN();"> Enter template design </a>
</body>
</html>

6. Modification of JS parameter properties

Summary:

The difficulty of PDF is to accurately calculate the location of the content to be filled, which is troublesome to debug, while lodop is a graphical interface, which is convenient for us to debug, and its syntax is simple, which is convenient to dissolve in JS. Here, only a simple example is simply listed. For more functions, please refer to official website address: http://www.lodop.net

Related articles: