Vue + Print.js前端打印自定义字体大小、自定义样式以及封装共享样式

npm install print-js --save

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

<template>
  <div>
    <button @click="printDocument">打印文档</button>
    <div id="printArea">
      <h1>打印示例</h1>
      <p>这是一个使用 Print.js 打印的示例。</p>
      <p>你可以自定义样式和字体大小。</p>
    </div>
  </div>
</template>

<script>
import printJS from 'print-js';

export default {
  methods: {
    printDocument() {
      printJS({
        printable: 'printArea', // 打印的元素id
        type: 'html',           // 打印类型为 HTML
        style: `
          #printArea {
            font-family: Arial, sans-serif;
            font-size: 18px;
          }
          h1 {
            color: #3498db;
            font-size: 24px;
          }
          p {
            color: #2c3e50;
          }
        ` // 自定义样式
      });
    }
  }
};
</script>

<template>
  <div>
    <button @click="printDocument">打印文档</button>
    <div id="printArea">
      <h1>自定义字体大小和样式</h1>
      <p>这段文字的字体大小为 16px，颜色为灰色。</p>
      <p>标题的字体大小为 24px，颜色为蓝色。</p>
    </div>
  </div>
</template>

<script>
import printJS from 'print-js';

export default {
  methods: {
    printDocument() {
      printJS({
        printable: 'printArea', 
        type: 'html',
        style: `
          #printArea {
            font-family: 'Helvetica', sans-serif;
            font-size: 14px;
            color: #333;
          }
          h1 {
            font-size: 24px;
            color: #3498db;
          }
          p {
            font-size: 16px;
            color: #7f8c8d;
          }
        `
      });
    }
  }
};
</script>

/* print-style.css */
.print-header {
  font-size: 24px;
  color: #3498db;
}

.print-body {
  font-size: 16px;
  color: #7f8c8d;
}

.print-footer {
  font-size: 12px;
  color: #bdc3c7;
}

<template>
  <div>
    <button @click="printDocument">打印文档</button>
    <div id="printArea">
      <h1 class="print-header">共享样式打印</h1>
      <p class="print-body">这是共享样式的打印示例。</p>
      <footer class="print-footer">打印自定义页脚</footer>
    </div>
  </div>
</template>

<script>
import printJS from 'print-js';
import './print-style.css'; // 引入共享样式

export default {
  methods: {
    printDocument() {
      printJS({
        printable: 'printArea',
        type: 'html',
        style: `
          @import url('print-style.css');
        `
      });
    }
  }
};
</script>