introduce
If the printing function is required, Lodop is the plug-in that implements the requirements. It introduces the corresponding js-sdk, uses js to call the corresponding printing method, and then the client software will be called up (user installation is required), and then the content can be printed in the software.
How to use
Minimum implementation
3 most basic methods to implement printing
LODOP.PRINT_INIT("Print task name"); //First an initialization statementLODOP.ADD_PRINT_TEXT(0,0,100,20,"Text Content One");//Then multiple ADD statements and SET statements(); //The last print(Or preview、maintain、design)Statement
All methods
- PRINT_INIT(strPrintTaskName) print initialization
- SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName) Set the paper size (1 horizontal direction, 2 vertical direction, width, height, page size name, width and height can be set to 0 only if "A5" and "A4")
- ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml) adds hypertext item
- ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent) adds plain text item
- ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml) Add table items (strHtml is an html template string)
- ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor) draws graphics
- SET_PRINT_STYLE(strStyleName, varStyleValue) sets the object style
- PREVIEW Print Preview
- PRINT Direct Print
- PRINT_SETUP Printing Maintenance
- PRINT_DESIGN Print Design
Using Lodop in Vue
Download lodop, put the js file into utils, and modify the two methods inside to export function (expose it, let other js files import to use)
// Renovation//==== Determine whether you need to install the CLodop cloud print server:=====export function needCLodop(){ ...... }
//==== The main process of obtaining LODOP object: =====export function getLodop(oOBJECT,oEMBED){ ...... }
The logic of writing a good print method
//
import { getLodop } from '@/utils/LodopFuncs'
/**
* Print method doPrint
* @param {*} printConfig Task name, upper margin, left margin, width, height, print html content, whether to screen horizontally, paging
*/
export default function({ name, top, left, width, height, htmlContent, isHorizontal }) {
const LODOP = getLodop()
LODOP.PRINT_INIT('Order Order') // Print initialization (print task name) LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4')
LODOP.SET_PRINT_STYLE('FontSize', 18) // Style LODOP.SET_PRINT_STYLE('Bold', 1)
// LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, 'Print page part content') // Add plain text content // top,left,width,height,htmlContent
LODOP.ADD_PRINT_HTM(88, 75, 650, 978, htmlContent) // Add HTML template content // (); // Print directly () // Preview}
Mount the print method to the global method
//
import doPrint from '@/utils/doPrint'
.$doPrint = doPrint
existvueUsed on the page
this.$doPrint(data)
/**
* Note: Because this plugin is used here, it may be necessary to allow the internal method of this plugin to be used normally after the loading is completed.
* That is to say, it also uses some preparation work, such as judgment methods, connection communications, etc.
* If you use it directly, it will cause an error, or other problems such as crashes, so you can delay the printing operation here.
* setTimeout(()=> {
* this.$doPrint(data)
* })
* */
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support.