xelf-local-client

v1.0.1

Published

2 months ago

A Component Library for Vue.js

Downloads

0High
0Medium
0Low

wangyq2022

xelf-local-client

xelf-local-server 是一个可以在 windows\mac\linux 操作系统上运行的，为web项目提供本地打印机调用等服务的服务端程序。本插件则是为xelf-local-server专门开发的，Vue项目插件，封装了与服务端的连接以及本地服务调用的方法。

1. 更新日志

1.0.0

2024-03-16 发布首次发布，提供以下功能 1、连接本地服务功能 2、断开本地服务功能 3、获取本地打印机列表功能 4、调用本地打印机，打印html内容功能 5、调用本地打印机，打印pdf内容功能 6、调用本地服务，输出Html内容到PDF文件功能

2. 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i xelf-local-client -S

全局引入在项目main.js文件中定义全局的变量“$PRT”，通过“initialize”方法初始化客户端对象，项目其他页面可以通过“this.$PRT”调用本地服务功能。当然变量名称可以是你自定义的。

      import Vue from 'vue';
      import App from './App.vue';

      import localClient from 'xelf-local-client';
      Vue.prototype.$PRT = localClient.initialize();

      new Vue({
        el: '#app',
        render: h => h(App)
      });

局部引入如果你想在某一个页面单独引入，可以在该页面定义局部变量，通过“initialize”方法初始化客户端对象，然后通过局部变量调用本地服务，当然这样做其他页面将无法通过这个局部变量调用本地服务功能。

      import localClient from 'xelf-local-client';
      export default {
        name: 'LocalClient',
        date {
          return {
            connect: null
          }
        },
        methods: {
          connectLocalServer() {
            this.connect = localClient.initialize(); // 连接本地服务
            this.connect.printHtml('Hellow word!', '打印机名称'); // 调用本地服务
            this.connect.disConnect(); // 断开本地服务
          }
        }
      }

3. 连接本地服务

在连接本地服务之前需要先将本地服务启动，再通过client连接本地服务，如果连接中通断开客户端会自动尝试重新连接。

使用默认参数一般情况下可以使用默认参数直接连接本地服务。

      <el-button @click="hConnectDefault">连接服务器</el-button>
      <el-button @click="hDisconnectDefault">断开服务器</el-button>
      
      hConnectDefault() {
        this.locSvr = locsvr.initialize()
      },
      hDisconnectDefault() {
        this.locSvr.disconnect() // 断开本地服务连接
      }

使用自定义参数参数有需要的情况（如：连接其他服务器上部署的服务）可以使用自定义参数连接到本地服务。

      <el-button @click="hConnectCustom">连接服务器</el-button>
      <el-button @click="hDisconnectCustom">断开服务器</el-button>
    
      hConnectCustom() {
        this.locSvr1 = locsvr.initialize('http', 'localhost', '12345')
      },
      hDisconnectCustom() {
        this.locSvr1.disconnect() // 断开本地服务连接
      }

方法说明

initialize : 初始化并连接本地服务 
  protocol: 协议名称，可选'http'、'ws', 默认'http'
  ip: IP地址，默认'localhost'
  port: 端口，默认'12345' 
  返回值：返回连接对象
  
disconnect ：断开本地服务
  参数：无
  返回值：无

4. 调用打印服务

获取打印机列表使用“getPrinterList”方法可以获取本地服务所在计算机的打印机列表。示例代码如下：

      <el-button @click="hGetPrinters">获取本地打印机列表</el-button>  
        
      hGetPrinters() {
        this.$PRT.getPrinterList().then(ret => {
          this.printers = ret
        })
      }

打印HTML内容调用本地服务printHTML方法打印HTML内容，参数 html 为需要打印的HTML内容的字符串，参数 printOptionHtml 为打印配置参数，如果是静默打印可以通过printer属性指定打印机，如果是非静默打印则可以不指定打印机。另外如果打印内容中包含css样式需要与HTML内容一同已字符串格式传入。示例代码如下：

      <el-button @click="hPrintHTMLSilent">打印(静默)</el-button><el-button @click="hPrintHTML">打印(非静默)</el-button>

      hPrintHTMLSilent() {
        this.$PRT.printHtml(
            '<div class="xx">Hello World!<style>.xx { font-size: 28pt; }</style></div>',
            { printer: 'Microsoft Print to PDF' }).then(() => {
          this.htmlPrintRet = '打印成功'
        }).catch(err => {
          this.htmlPrintRet = '打印失败：' + err.message
        })
      },
      hPrintHTMLPreview() {
        this.$PRT.printHtml(
            '<div class="xx">Hello World!<style>.xx { font-size: 28pt; }</style></div>',
            { silent: false }).then(() => {
          this.htmlPrintRet = '打印成功'
        }).catch(err => {
          this.htmlPrintRet = '打印失败：' + err.message
        })
      }

打印PDF文件调用本地服务打印PDF文件，参数 pdfUrl 为PDF文件URL地址，参数 printOptionPdf 为打印配置，如果是静默打印通过printer属性指定打印机，如果是非静默打印则可以不指定打印机。示例代码如下：

      <el-button @click="hPrintPDFSilent">打印(静默)</el-button><el-button @click="hPrintPDF">打印(非静默)</el-button>

      hPrintPDFSilent() {
        this.$PRT.printPDF(
            'http://www.doe.zju.edu.cn/_upload/article/files/a0/22/595bdc2b4ca28f90f51ca3b3ffc5/45c3e922-550f-45a2-8602-64b9c202b33e.pdf',
            { printer: 'Microsoft Print to PDF' }).then(() => {
          this.pdfPrintRet = '打印成功'
        }).catch(err => {
          this.pdfPrintRet = '打印失败：' + err.message
        })
      },
      hPrintPDF() {
        this.pdfPrintRet = '--'
        this.$PRT.printPDF(
            'http://www.doe.zju.edu.cn/_upload/article/files/a0/22/595bdc2b4ca28f90f51ca3b3ffc5/45c3e922-550f-45a2-8602-64b9c202b33e.pdf',
            { silent: false }).then(() => {
          this.pdfPrintRet = '打印成功'
        }).catch(err => {
          this.pdfPrintRet = '打印失败：' + err.message
        })
      }

输出Html内容到PDF文件调用本地服务输出HTML内容到PDF文件，参数 html 为HTML内容，参数toPdfOption为输出参数。另外如果打印内容中包含css样式需要与HTML内容一同已字符串格式传入。示例代码如下：

      <el-button @click="hPrintToPDF">输出为PDF</el-button>
        
      hPrintToPDF() {
        this.toPDFPrintRet = '--'
        this.$PRT.printToPDF( '<div class="xx">Hello World!<style>.xx { font-size: 28pt; }</style></div>',
            {  }).then(() => {
          this.toPDFPrintRet = '打印成功'
        }).catch(err => {
          this.toPDFPrintRet = '打印失败：' + err.message
        })
      }

方法说明

1) getPrinterList：	获取本地服务所在计算机的打印列表
    参数：无
    返回值：Promise<List<Printer>>。Printer对象结构 { description: 描述, displayName: 显示名称, isDefault: 是否为默认打印机, name: 名称, status: 状态 }

2) printHTML：	打印HTML
    html：需要打印的HTML的字符串，如果有css样式要与HTML字符串一起传入，打印内容的最外层应有标签包裹
    printOptionHtml: printOptionHtml: 打印配置参数，具体参见 PrintOptionHtml 说明。
    返回值：返回Promise对象，then代表打印成功，catch代表打印失败，err.message是失败原因

3) printPDF: 打印PDF文件
    pdfUrl: 需要打印的PDF文件的URL地址(可以是网络地址也可以是本地地址)
    printOptionPdf: 打印配置参数，具体参见 PrintOptionPdf 说明。
    返回值：返回Promise对象，then代表打印成功，catch代表打印失败，err.message是失败原因

4) printToPDF: 输出Html内容到PDF文件
    html: 需要打印的PDF文件的URL地址
    toPdfOption: PDF文件输出配置参数，具体参见 ToPdfOption 说明。
    返回值：返回Promise对象，then代表打印成功，catch代表打印失败，err.message是失败原因

PrintOptionHtml说明 1) printer：打印机名称。必须是系统定义的名称，而不是“友好”名称。类型：string 默认：使用系统默认打印机

2) margins：边距设置
    类型：Object<{
          marginType: string //边距类型，可选 default、none、printableArea、custom
          top: number // 上边距
          right: number // 右边距
          bottom: number // 下边距
          left: number // 左边距
        }>
    默认：{ marginType: 'default' }

3) landscape: 是否横向打印
    类型：boolean
    默认：false
    
4) copies: 打印份数
    类型：number
    默认：1
    
5) pageRanges: 打印范围
    类型：Object<{ from: number, to: number }>  from和to都是从0开始的数值，代表打印从from到to的页面
    默认：{}
    
6) pageSize: 页面尺寸
    类型：string/Object, A0、A1、A2、A3、A4、A5、A6、Legal、Letter、Tabloid或包含高度(height)和宽度(width)的对象
    默认：'A4'
    
7) header: 页眉内容
    类型：string
    默认：''
    
8) footer: 页脚内容
    类型：string
    默认：''

PrintOptionPdf说明 1) printer：打印机名称。必须是系统定义的名称，而不是“友好”名称。类型：string 默认：使用系统默认打印机
ToPdfOption说明

1) margins：边距设置
    类型：Object<{
          marginType: string //边距类型，可选 default、none、printableArea、custom
          top: number // 上边距
          right: number // 右边距
          bottom: number // 下边距
          left: number // 左边距
        }>
    默认：{ marginType: 'default' }

2) landscape: 是否横向打印
    类型：boolean
    默认：false
    
3) scale: 渲染比例
    类型：number
    默认：1
    
5) pageRanges: 打印范围
    类型：Object<{ from: number, to: number }>  from和to都是从0开始的数值，代表打印从from到to的页面
    默认：{}
    
6) pageSize: 页面尺寸
    类型：string/Object, A0、A1、A2、A3、A4、A5、A6、Legal、Letter、Tabloid或包含高度(height)和宽度(width)的对象
    默认：'A4'
    
7) pdf_file_path: 输出PDF文件的目录
    类型：string
    默认：系统缓存目录
    
8) pdf_file_name: 输出PDF文件名称
    类型：string
    默认：temp.pdf

5. 获取信息

提供一系列方法供用户获取本地服务所在计算机的信息。

获取IP地址调用 getIp 方法获取本地服务所在计算机的IP地址。示例代码如下：

      <el-button @click="hGetIP">获取IP地址</el-button>

      hGetIP() {
        this.$PRT.getIp().then(ret => {
          this.ip = ret
        })
      }

获取IPv6地址调用 getIpv6 方法获取本地服务所在计算机的IPv6地址。示例代码如下：

      <el-button @click="hGetIPv6">获取IPv6地址</el-button>
      
      hGetIPv6() {
        this.$PRT.getIpv6().then(ret => {
          this.ipv6 = ret
        })
      }

获取Mac地址调用 getMac 方法获取本地服务所在计算机的mac地址。示例代码如下：

      <el-button @click="hGetMac">获取Mac地址</el-button>
      
      hGetMac() {
        this.$PRT.getMac().then(ret => {
          this.mac = ret
        })
      }

获取HostName 调用 getHostname 方法获取本地服务所在计算机的HostName。示例代码如下：

      <el-button @click="hGetHostname">获取HostName</el-button>
      
      hGetHostname() {
        this.$PRT.getHostname().then(ret => {
          this.hostname = ret
        })
      }

获取操作系统平台调用 getOsPlatform 方法获取本地服务所在计算机的操作系统平台。示例代码如下：

      <el-button @click="hGetOsPlatform">获取操作系统平台</el-button>
      
      hGetOsPlatform() {
        this.$PRT.getOsPlatform().then(ret => {
          this.osplatform = ret
        })
      }

获取操作系统版本号调用 getOsRelease 方法获取本地服务所在计算机的操作系统版本号。示例代码如下：

      <el-button @click="hGetOsRelease">获取操作系统版本号</el-button>
      
      hGetOsRelease() {
        this.$PRT.getOsRelease().then(ret => {
          this.osRelease = ret
        })
      }

获取操作系统类型调用 getOsType 方法获取本地服务所在计算机的操作系统类型。示例代码如下：

      <el-button @click="hGetOsType">获取操作系统类型</el-button>
      
      hGetOsType() {
        this.$PRT.getOsType().then(ret => {
          this.osType = ret
        })
      }

获取操作系统内核版本的字符串调用 getOsVersion 方法获取本地服务所在计算机的操作系统内核版本。示例代码如下：

      <el-button @click="hGetOsVersion">获取操作系统版本</el-button>
      
      hGetOsVersion() {
        this.$PRT.getOsVersion().then(ret => {
          this.osVersion = ret
        })
      }

方法说明

1). getIp:  获取IP地址
  参数： 无
  返回值：返回Promise对象，Promise<string>
  
2). getIpv6:  获取IPv6地址
  参数： 无
  返回值：返回Promise对象，Promise<string>

3). getMac:  获取mac地址
  参数： 无
  返回值：返回Promise对象，Promise<string>

4). getHostname:  获取主机名称，暂时存在中文乱码问题，以后版本中会解决这个问题
  参数： 无
  返回值：返回Promise对象，Promise<string>

5). getOsPlatform:  获取操作系统平台，可能的值为 'aix'、'darwin'、'freebsd'、'linux'、'openbsd'、'sunos' 和 'win32'
  参数： 无
  返回值：返回Promise对象，Promise<string>

6). getOsRelease:  获取操作系统发行版本号
  参数： 无
  返回值：返回Promise对象，Promise<string>

7). getOsType:  获取操作系统类型，在 Linux 上返回 'Linux'，在 macOS 上返回 'Darwin'，在 Windows 上返回 'Windows_NT'
  参数： 无
  返回值：返回Promise对象，Promise<string>
  
8). getOsVersion:  获取操作系统内核版本的字符串
  参数： 无
  返回值：返回Promise对象，Promise<string>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

xelf-local-client

1. 更新日志

1.0.0

2. 安装

3. 连接本地服务

4. 调用打印服务

5. 获取信息