vue2中Print.js的使用（pdf、html、json、image）超详细

<template>
  <div>
    <button @click="printHtml">打印HTML</button>
    <button @click="printPdf">打印PDF</button>
    <button @click="printJson">打印JSON</button>
    <button @click="printImage">打印图片</button>
  </div>
</template>
 
<script>
import printJS from 'print-js';
 
export default {
  methods: {
    printHtml() {
      printJS({
        printable: 'html-element-id', // 需要打印的HTML元素的ID
        type: 'html',
        targetStyles: ['*'] // 打印时包含所有样式
      });
    },
    printPdf() {
      printJS({
        printable: 'http://someurl/path/to/pdf/file.pdf', // PDF文件的URL
        type: 'pdf',
      });
    },
    printJson() {
      printJS({
        printable: { key1: 'value1', key2: 'value2' }, // 需要打印的JSON对象
        type: 'json',
      });
    },
    printImage() {
      printJS({
        printable: 'http://someurl/path/to/image/file.jpg', // 图片文件的URL
        type: 'image',
      });
    }
  }
}
</script>

这个代码示例展示了如何在Vue 2应用程序中使用Print.js库来打印不同类型的内容。printHtml, printPdf, printJson, 和 printImage 方法分别用于打印HTML元素、PDF文件、JSON对象和图片。每个方法都通过调用printJS函数并传递一个包含printable属性和类型的配置对象来实现打印功能。