Front-end implementation of printing web pages in the browser

Front-end data report printing scheme

background

Project: vue + element ui

Requirement: The web terminal is connected to the printer to print the report function

Keywords: browser-side connection to printer to print reports

research

First of all, there are only two ways for the front end to call printing, using window.print() and calling a network printer.

window.print

This is the api opened by the browser. Generally, the shortcut key ctrl+p or the right key can also be called.

Partial printing can be done through the media query scheme, that is, hiding other elements and only showing the area that needs to be printed.

call network printer

This method is actually to call the interface to pass parameters, which can generally be used with html2canvas

Program

Since the network printer solution also requires back-end or printer support, it does not apply here.

Option 1: Region Printing via CSS Media Queries

1. Add a global media query style

 @media print {
  .no-print {
    display: none!important;
  }
}

2. Bind styles to elements that don't need to be printed

 <div class="no-print"></div>

3. Change the size of the print area. The width is generally 980px. Too much width will cause overflow.

 printElement.style.width = "980px"

Advantages and disadvantages

Advantages: Less difficult to change.

Disadvantages: There are many locations involved, and this behavior is too 蠢 , which is not elegant.

Option 2: Append the element to the iframe for rendering and printing

By getting the element that needs to be printed, then getting the element through innerHtml, then writing the html string to the iframe, and then writing all the required styles.

 const printId = 'print-element-id';
const printElement = document.querySelector(printId)
const printElementHtml = printElement.innerHtml

const iframe = document.createElement('iframe')
iframe.setAttribute('style', '你的样式，可以从css文件下载')
document.appendChild(iframe)
iframe.contentWindow.document.body.innerHtml = printElementHtml;
// 调用打印
iframe.contentWindow.print()

Advantages and disadvantages

The changes are minor and can be dealt with in a targeted manner.

However, the style is prone to problems and needs to be adjusted. Some of the problems that depend on the adaptive width of js may appear 打印不完整 .

Option 3: Render by building TABLE directly in the iframe

个人推荐方案

Since the goal is to print the report, you can focus on the report, there is no need to worry about whether it is consistent with the web page, as long as you can print it by table, you can achieve the goal.

Of course, if the product needs to be consistent, then see if you can communicate well, and if you can't, choose the plan above.

The core is to combine the scheme 2 and use a custom table to simplify the style to achieve the purpose of printing complete.

 const data = [
    {
      "name": "马磊",
      "email": "[e-mail]",
      "id": "EfFACeD4-51d8-43B5-E9Bf-FFEB361dc5a4",
      "age": 18,
      "phone": "19864717125",
      "address": "场历当式使民党标对确并线却。",
      "user": "75FD6371-4c3D-ED90-DD15-F0EA6fD7b942",
      "create_at": "2005-08-25 PM 18:35:14",
      "update_at": "1983-12-28 AM 00:47:25"
    },
    {
      "name": "程刚",
      "email": "[e-mail]",
      "id": "912C1FF4-6CeA-8489-b2D8-2d5FFA816F6b",
      "age": 97,
      "phone": "19838636737",
      "address": "办约拉则三称斯也包报素万制老。",
      "user": "94754927-94cf-a7e5-aBe7-3A23112BC8f5",
      "create_at": "1988-08-04 PM 17:26:51",
      "update_at": "2008-05-26 AM 08:33:42"
    },
 ];
// 代码非完整代码，【伪代码】，代码大致行为：通过数据创建table
const table = document.createElement('table')
data.forEach(item=>{
  const tr = document.createElement('tr')
  table.appendChild(tr);
  Object.keys(item).forEach(item => {
    const td = document.createElement('td')
      tr.appendChild(td)
  });
});

const iframe = document.createElement('iframe')
iframe.setAttribute('style', '你的样式，可以从css文件下载')
document.appendChild(iframe)
// 这里改成table的html代码，当然可以考虑改为自己 appendChild element
iframe.contentWindow.document.body.innerHtml = table.innerHtml;
// 调用打印
iframe.contentWindow.print()

third-party plugins

However, in actual projects, it is not necessary to be so difficult to implement for yourself. There is a very complete framework that can complete the above capabilities print-js

The call is also simple:

 printJS({
  documentTitle: '测试',
  header: '表格标题',
  type: 'json',
  properties: [
    { field: 'id', displayName: '编号' },
    { field: 'name', displayName: '名称' },
    { field: 'age', displayName: '年龄' },
    { field: 'phone', displayName: '手机号' },
    { field: 'address', displayName: '地址' },
    { field: 'email', displayName: '邮箱' },
    { field: 'address', displayName: '地址' },
    { field: 'user', displayName: '用户编号' },
    { field: 'create_at', displayName: '创建时间' },
    { field: 'update_at', displayName: '更新时间' },
  ],
  printable: [
    {
      "name": "马磊",
      "email": "[e-mail]",
      "id": "EfFACeD4-51d8-43B5-E9Bf-FFEB361dc5a4",
      "age": 18,
      "phone": "19864717125",
      "address": "场历当式使民党标对确并线却。",
      "user": "75FD6371-4c3D-ED90-DD15-F0EA6fD7b942",
      "create_at": "2005-08-25 PM 18:35:14",
      "update_at": "1983-12-28 AM 00:47:25"
    },
    {
      "name": "程刚",
      "email": "[e-mail]",
      "id": "912C1FF4-6CeA-8489-b2D8-2d5FFA816F6b",
      "age": 97,
      "phone": "19838636737",
      "address": "办约拉则三称斯也包报素万制老。",
      "user": "94754927-94cf-a7e5-aBe7-3A23112BC8f5",
      "create_at": "1988-08-04 PM 17:26:51",
      "update_at": "2008-05-26 AM 08:33:42"
    },
  ],
})

Little tail

My blog: https://www.notbucai.com/