当前位置：首页 > article >正文

JavaScript调用系统自带的打印页面

article 2024/11/15 17:10:59

JavaScript调用系统自带的打印页面

export function printPdf(data: BlobPart,) {
  const blob = new Blob([data], { type: 'application/pdf' })
  let date = (new Date()).getTime()
  let ifr = document.createElement('iframe')
  ifr.style.frameborder = 'no'
  ifr.style.display = 'none'
  ifr.style.pageBreakBefore = 'always'
  ifr.setAttribute('id', 'printPdf' + date)
  ifr.setAttribute('name', 'printPdf' + date)
  ifr.src = window.URL.createObjectURL(blob)
  document.body.appendChild(ifr)
  doPrint('printPdf' + date)
  window.URL.revokeObjectURL(ifr.src) // 释放URL 对象
}

function doPrint(val) {
  let ordonnance = document.getElementById(val).contentWindow
  console.log(ordonnance)
  setTimeout(() => {
    ordonnance.print()
  }, 100)
}

这两段代码是用于在网页中打印PDF文件的JavaScript函数。下面是每个函数的详细解释：

`printPdf` 函数

这个函数接收一个参数 data，这个参数应该是PDF文件的内容，类型为 BlobPart。BlobPart 可以是 Blob、File 或者 ArrayBuffer 等类型，这里用于创建一个新的 Blob 对象，该对象代表PDF文件。

创建Blob对象：
```
const blob = new Blob([data], { type: 'application/pdf' })
```
这行代码创建了一个新的 Blob 对象，其中包含PDF数据，并指定了MIME类型为 application/pdf。
生成时间戳：
```
let date = (new Date()).getTime()
```
获取当前时间的时间戳，用于生成唯一的ID。
创建iframe元素：
```
let ifr = document.createElement('iframe')
```
创建一个 iframe 元素，用于在其中加载PDF文件。

设置iframe属性：

ifr.style.frameborder = 'no'
ifr.style.display = 'none'
ifr.style.pageBreakBefore = 'always'
ifr.setAttribute('id', 'printPdf' + date)
ifr.setAttribute('name', 'printPdf' + date)

设置 iframe 的样式和属性，使其不可见，并且在页面中不会显示边框。同时，使用时间戳生成唯一的ID和名称。

设置iframe的src属性：
```
ifr.src = window.URL.createObjectURL(blob)
```
使用 Blob 对象创建一个对象URL，并将其设置为 iframe 的 src 属性，这样 iframe 就会加载PDF文件。
将iframe添加到文档中：
```
document.body.appendChild(ifr)
```
将 iframe 添加到文档的 body 中。
调用打印函数：
```
doPrint('printPdf' + date)
```
调用 doPrint 函数，传入 iframe 的ID，用于打印PDF文件。
释放URL对象：
```
window.URL.revokeObjectURL(ifr.src)
```
释放之前创建的对象URL，以释放内存。

`doPrint` 函数

这个函数接收一个参数 val，这个参数应该是 iframe 的ID。

获取iframe内容窗口：
```
let ordonnance = document.getElementById(val).contentWindow
```
通过ID获取 iframe 元素，并获取其内容窗口。
打印PDF：
```
setTimeout(() => {
  ordonnance.print()
}, 100)
```
使用 setTimeout 延迟100毫秒后调用 iframe 内容窗口的 print 方法，以打印PDF文件。