vue 打印某个区域的HTML【print-js】

作者：System 时间：2024年08月17日分类：所有,html 字数：699

要在Vue中使用print-js库来打印特定区域的HTML，首先需要安装print-js：




npm install print-js --save

然后在Vue组件中引入并使用print-js：




import printJS from 'print-js';
 
export default {
  methods: {
    printContent() {
      printJS({
        printable: 'printable-area', // 指定需要打印的区域的ID
        type: 'html', // 指定打印内容的类型
        style: '@page { size: auto;  margin: 0mm; }' // 可以添加打印样式
      });
    }
  }
}

在模板中，确保有一个元素包含需要打印的内容，并设置一个ID：




<template>
  <div>
    <button @click="printContent">打印区域</button>
    <div id="printable-area">
      <!-- 需要打印的内容 -->
    </div>
  </div>
</template>

当用户点击按钮时，printContent方法将被触发，print-js将会打印出printable-area内的HTML内容。

vue 打印某个区域的HTML【print-js】

评论已关闭

推荐阅读