Vue 3 使用 print-js 打印隐藏元素内容 - <script setup> 实践指南

在 Vue 3 中，可以使用<script setup>语法来实现打印<div id="printWeb" style="display: none"></div>内的内容。下面是一个示例代码：

<template>
  <div>
    <button @click="printContent">Print</button>
    <div id="printWeb" style="display: none">
      <!-- Content to be printed -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import printJS from 'print-js';

const printContent = () => {
  const content = document.getElementById('printWeb').innerHTML;
  printJS(content);
};
</script>

在上述代码中，我们在<script setup>中导入了ref和print-js库。printContent函数用于获取<div id="printWeb">的innerHTML内容，并使用print-js库进行打印。

注意，要在Vue 3中使用print-js库，需要先安装它。可以使用以下命令进行安装：

npm install print-js

然后，在你的项目中导入并使用print-js库。