Python开发打印服务(2)

1.前端环境

在上一盘《Python开发打印服务(1)》中，我们介绍的内容主要集中在后端 Python 实现打印服务功能的思路及方法，在本篇中，我们来介绍前端如何展现和打印 pdf 。

前端开发环境：

2.实现思路

3.调用打印服务

对于调用打印服务，我们可以封装为统一的函数，代码如下：

# coding: utf-8
import json
import rpyc

import settings


def print_text(template_file_name, data: dict):
    c = rpyc.connect(settings.PRINT_HOST, settings.PRINT_PORT)
    pdf_file = c.root.print_text(template_file_name, json.dumps(data))
    c.close()
    return pdf_file


def print_table(template_file_name, data: dict):
    c = rpyc.connect(settings.PRINT_HOST, settings.PRINT_PORT)
    pdf_file = c.root.print_table(template_file_name, json.dumps(data))
    c.close()
    return pdf_file

4.打印按钮

在 web 页面中添加 PrimeVUE 的按钮，代码示例如下：

<Button type="button" label="打印" icon="pi pi-print" style="margin-right: 12px;" @click="print_button_clicked"/>

5.实现打印事件

打印按钮主要实现调用后端 API，后端 API 实现根据提交参数获取要打印的数据，然后调用打印服务生成 pdf 文件。打印按钮事件代码示例：

      postRequest(
          '/xxxxxx_api/xxx/print_xxx',
          {date: print_date}
      ).then((response) => {
        let pdf = response.data.pdf
        if (!pdf) return
        pdfUrl.value = '/pdfjs-2.13.216-dist/web/viewer.html?file=/print_serve_api/reader/read/' + pdf
      })

此处的关键语句：

pdfUrl.value = '/pdfjs-2.13.216-dist/web/viewer.html?file=/print_serve_api/reader/read/' + pdf

其中：/print_serve_api/reader/read/为打印服务提供的 api，用于从打印服务器下载生成的pdf文件。

6.实现pdf展现和打印

将 pdf.js 下载的代码存放到 public 目录下。

在web页面上增加全屏侧边栏，代码如下：

  <!--打印预览全屏侧边栏-->
  <Sidebar v-model:visible="isPrintView" :baseZIndex="10000" position="full">
    <iframe :src="pdfUrl" style="width: 100%; height: calc(100vh - 80px);"/>
  </Sidebar>

我们可以看到，通过打开全屏侧边栏，在侧边栏中用 ifrme 来展现 pdfUrl 变量给定的内容。

效果如下：

打印操作如下图：

在这里，只需要点击打印即可在选择的打印机上输出文件内容。