API 示例

通过js代码直接调用

客户端打印

调用本地客户端进行打印

支持后台静默打印，需要提前安装本地客户端如何下载？

// 公共变量
const template = {
    content: '{"width":100,"height":100,"pageUnit":"mm","elementList":[{"type":"Text","x":10,"y":10,"width":50,"height":10,"data":"磨刀霍霍向厨房","option":{"textAlign":"center","verticalAlign":"center"}},{"type":"TextTime","x":10,"y":20,"width":50,"height":10,"option":{"formatter":"{{yyyy年MM月dd日 hh:mm:ss}}","textAlign":"center","verticalAlign":"center"}},{"type":"Image","x":10,"y":30,"width":20,"height":20},{"type":"Image","x":10,"y":30,"width":20,"height":20}]}'
};

/**
 * 浏览器下载pdf到本地
 * @param blob
 * @param fileName
 */
function download(blob: Blob, fileName = 'myprint.pdf') {
    const blobUrl = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = blobUrl;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(blobUrl);
}

客户端连接状态

vue

<span>客户端连接状态: {{MyPrinter.clientConnectIs()? '已连接': '未连接'}}</span>

客户端连接状态: 未连接

修改客户端地址1.0.1

调用本地客户端进行打印，可以指定打印机，后台静默打印，可以获得打印结果

MyPrinter.setClientUrl('ws://192.168.1.45:9898')

客户端:

MyPrint预览面板

/**
 * 预览面板
 */
function handlePreviewPanel() {
    MyPrinter.chromePreview({
        panel: template.content,
        previewDataList: [{}],
        timeout: 10 * 1000
    }).then(res => {
        // 预览页面进行打印时，回调，预览页面的停留时间也会记入超时时间
        // 预览页面进行打印时，回调，预览页面的停留时间也会记入超时时间
        if (res.status == 'SUCCESS') {
            console.log('打印成功');
        } else if (res.status == 'ERROR') {
            console.log('打印失败', res.msg);
        } else if (res.status == 'TIMEOUT') {
            console.log('打印超时');
        }

        if (res.type == 'CHROME_PRINT') {
            console.log('浏览器打印');
        } else if (res.type == 'CLIENT_PRINT') {
            console.log('客户端打印');
        } else if (res.type == 'CLIENT_GENERATE_PDF') {
            console.log('客户端生成pdf');
        }
    });
}

浏览器打印

调用浏览器进行打印，无法后台静默打印，需要用户手动点击打印，无法得知打印结果(无法知道用户是否取消)

/**
 * 浏览器打印
 */
function handleChromePrint() {
    MyPrinter.chromePrinter({
        panel: template.content,
        previewDataList: [{}]
    }).then(res => {
        console.log(res)
        if (res.status == 'SUCCESS') {
            console.log('打印成功');
        } else if (res.status == 'ERROR') {
            console.log('打印失败', res.msg);
        } else if (res.status == 'TIMEOUT') {
            console.log('打印超时');
        }
    });

}

客户端打印

调用本地客户端进行打印，可以指定打印机，后台静默打印，可以获得打印结果

MyPrinter.clientPrinter({
    panel: template.content,
    printer: defaultPrinter.value.name,
    previewDataList: [{}]
}).then(res => {
    console.log(res);
    if (res.status == 'SUCCESS') {
        console.log('打印成功');
    } else if (res.status == 'ERROR') {
        console.log('打印失败', res.msg);
    } else if (res.status == 'TIMEOUT') {
        console.log('打印超时');
    }
});

打印结果:

浏览器生成pdf

浏览器通过html转pdf，内容为图片格式，缺点：不清晰

/**
 * 浏览器生成pdf
 */
function handlePdfChrome() {
    MyPrinter.pdfChrome({
        panel: template.content,
        previewDataList: [{}]
    }).then(res => {
        console.log(res)
        download(res.blob!)
    });
}

客户端生成pdf

调用客户端生成pdf，内容清晰

/**
 * 客户端生成pdf
 */
function handlePdfClient() {
    MyPrinter.pdfClient({
        panel: template.content,
        previewDataList: [{}]
    }).then(res => {
        console.log(res)
        download(res.blob!)
    });

}

服务端生成pdf

调用服务端生成pdf，内容格式与客户端生成完全一致，内容清晰

/**
 * 服务端生成pdf
 */
function handlePdfServer() {
    MyPrinter.pdfServer({
        panel: template.content,
        previewDataList: [{}]
    }).then(res => {
        console.log(res)
        download(res.blob!)
    });
}

浏览器生成图片

浏览器通过html转图片，多页会生成对个图片，缺点：不清晰

/**
 * 浏览器生成图片
 */
function handleImgChrome() {
    MyPrinter.imgChrome({
        panel: template.content,
        previewDataList: [{}]
    }).then(res => {
        console.log(res)
        for (let blob of res.blobList!) {
            download(blob, 'myprint.png')
        }
    });
}

服务端生成图片

调用服务端生成图片，内容清晰，只会返回一张图片，多页拼接成长图。

/**
 * 服务端生成图片
 */
function handleImgServer() {
    MyPrinter.imgServer({
        panel: template.content,
        previewDataList: [{}]
    }).then(res => {
        console.log(res)
        download(res.blob!, 'myprint.png')
    });

}

获取打印机列表（同步）

同步获取打印机列表，如果没获取到，则返回null

/**
 * 获取打印机列表
 */
function handleGetPrinterList() {
    printerList.value = MyPrinter.getPrinterList()
    console.log(printerList)
}

打印机列表：

获取打印机列表（异步）

异步获取打印机列表

/**
 * 获取打印机列表（异步）
 */
function handleAsyncGetPrinterList() {
    MyPrinter.asyncGetPrinterList().then(res => {
        console.log(res)
        printerList.value = res as any
    }).catch(e => {
        console.log(e)
    });
}

打印机列表：

获取默认打印机

获取系统设置的默认打印

/**
 * 获取默认打印机
 */
function handleDefaultPrinter() {
    console.log(MyPrinter.getDefaultPrinter)
    defaultPrinter.value = MyPrinter.getDefaultPrinter();
    console.log(defaultPrinter.value)
}

默认打印机：

发送文件到打印机打印1.0.1

调用本地客户端进行打印，可以指定打印机，后台静默打印，可以获得打印结果

fetch('http://file.cfcss.top/myprint.pdf', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/pdf'
    }
}).then(res => {
    res.blob().then(data => {
        MyPrinter.clientPrinter({
            file: data,
            scale: 'fit',
            orientation: 'portrait',
            printer: selectedPrinter.value
        }).then(s => {
            console.log(s);
        }).catch(e => {
            console.log(e);
        });
    });
});

pdf测试URL:

请选择打印机

打印结果:

方法说明

方法	说明	参数	返回值
setLocale	设置多语言，页面加载会默认读取 `window.localStorage.getItem('lang')`	(string: 'zhCn'\|'enUs')=>void	—
setClientUrl	设置客户端地址	(clientUrl: string)=>void	—
setServerUrl	设置服务端地址	(serverUrl: string)=>void	—
chromePreview	预览页面，会在超时/用户进行打印时进行回调	(printProps: PrintProps)	`Promise<PrintResult>`
chromePrinter	浏览器打印(直接调用浏览器打印页面)	(printProps: PrintProps)	`Promise<PrintResult>`
clientPrinter	本地客户端打印	(printProps: PrintProps)	`Promise<PrintResult>`
pdfChrome	浏览器构建pdf，清晰度较差	(printProps: PrintProps)	`Promise<PrintResult>`
pdfClient	从本地客户端获取pdf，返回Blob	(printProps: PrintProps)	`Promise<PrintResult>`
pdfServer	从服务器获取pdf，返回Blob	(printProps: PrintProps)	`Promise<PrintResult>`
imgChrome	从浏览器获取img，返回Blob	(printProps: PrintProps)	`Promise<PrintResult>`
imgServer	从服务器获取img，返回Blob	(printProps: PrintProps)	`Promise<PrintResult>`
asyncGetPrinterList	打印机列表，异步返回	(printProps: PrintProps)	`Promise<Printer[]>`
getPrinterList	打印机列表，同步返回，如果没获取到，返回null	(printProps: PrintProps)	`Printer[]`
getDefaultPrinter	获取操作系统默认的打印机	(printProps: PrintProps)	`Printer`
clientConnectIs	客户端是否连接	—	boolean

Types

PrintProps

/**
 * 打印请求参数
 */
export interface PrintProps {
    taskId?: string,
    title?: string,
    panel?: Panel | string,
    // appointChannel?: 'SERVER' | 'CHROME' | 'CLIENT',
    previewDataList: any[],
    // 如果 是 null/-1 不设置超时时间
    timeout?: number

    file?: Blob | ArrayBuffer | Uint8Array | string, // 要发送给打印机的文件，这个参数合上面的panel 只能二选一
    previewDataList?: any[],
    printer?: string, // 打印机
    orientation?: 'portrait' | 'landscape', // 打印方向
    paperSize?: string, // 打印file 时使用
    copies?: number, // 打印份数
    scale?: 'fit', // 是否缩放
    //双面打印 | 单面打印
    side?: 'duplex' | 'simplex',
}

PrintResult

/**
 * 打印结果
 */
export interface PrintResult {
    status: 'SUCCESS' | 'ERROR' | 'TIMEOUT';
    msg?: string,
    blob?: Blob,
    blobList?: Blob[],
    /**
     * CHROME_PRINT 浏览器打印
     * TIMEOUT 超时
     * CLIENT_PRINT 客户端打印
     * CLIENT_GENERATE_PDF 客户端生成pdf
     */
    type: 'CHROME_PRINT' | 'TIMEOUT' | 'CLIENT_PRINT' | 'CLIENT_GENERATE_PDF';
}

Printer

/**
 * 打印机
 */
interface Printer {

    /**
     * a longer description of the printer's type.
     */
    description: string;
    /**
     * the name of the printer as shown in Print Preview.
     */
    displayName: string;
    /**
     * whether or not a given printer is set as the default printer on the OS.
     */
    isDefault: boolean;
    /**
     * the name of the printer as understood by the OS.
     */
    name: string;
    /**
     * an object containing a variable number of platform-specific printer information.
     */
    options: any;
    /**
     * the current status of the printer.
     */
    status: number;
}

API 示例 ​

客户端打印 ​

客户端连接状态 ​

修改客户端地址1.0.1 ​

MyPrint预览面板 ​

浏览器打印 ​

客户端打印 ​

浏览器生成pdf ​

客户端生成pdf ​

服务端生成pdf ​

浏览器生成图片 ​

服务端生成图片 ​

获取打印机列表（同步） ​

获取打印机列表（异步） ​

获取默认打印机 ​

发送文件到打印机打印1.0.1 ​

方法说明 ​

Types ​

PrintProps ​

PrintResult ​

Printer ​

API 示例

客户端打印

客户端连接状态

修改客户端地址1.0.1

MyPrint预览面板

浏览器打印

客户端打印

浏览器生成pdf

客户端生成pdf

服务端生成pdf

浏览器生成图片

服务端生成图片

获取打印机列表（同步）

获取打印机列表（异步）

获取默认打印机

发送文件到打印机打印1.0.1

方法说明

Types

PrintProps

PrintResult

Printer