【Vue】使用print.js插件实现打印预览功能，超简单




<template>
  <div>
    <!-- 按钮用于触发打印 -->
    <button @click="print">打印</button>
    <!-- 需要打印的内容 -->
    <div id="printable">
      <h1>这是一个打印预览示例</h1>
      <p>这段文字将会在打印预览中显示。</p>
      <!-- 更多内容 -->
    </div>
  </div>
</template>
 
<script>
import printJS from 'print-js';
 
export default {
  methods: {
    print() {
      printJS({
        printable: 'printable',
        type: 'html',
        targetStyles: ['*']
      });
    }
  }
};
</script>

这段代码提供了一个简单的Vue组件，其中包含了一个按钮和一个需要打印的内容区域。点击按钮时，会触发print方法，该方法使用print-js插件来打开打印预览界面。printable属性设置为DOM元素的ID，指定了需要打印的内容。targetStyles属性确保了所有的样式都将被应用到打印的内容上。

【Vue】使用print.js插件实现打印预览功能，超简单

评论已关闭

推荐阅读