打印

vue3

vue3-print-nb

pnpm i vue3-print-nb

<!-- demo.vue -->

<template>
  <el-dialog v-model="dialogFormVisible" title="打印预览" width="40%">
    <div id="printContentOne">
      <div v-html="printContent"
        v-for="i in certificateList"
        :key="i"
        style="page-break-after: always"
      ></div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" v-print="printObjOne" > 打印 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>

const printObjOne = {
  id: "printContentOne",
  popTitle: "页面打印",
};

const printContent = '';

// 如果背景图片或颜色打印预览不出现，可以如下处理
// v-print-nb 打印背景颜色不生效解决方法
// 在使用了背景样式的地方加上：-webkit-print-color-adjust: exact;　　即可。
printContent = printContent.replace('background-image: url(', '-webkit-print-color-adjust: exact; background-image: url(');

</script>