html-pdf-j v1.0.1

Print PDF with Vue 3 and Vite

把 div 转换生成高质量 pdf

用法

npm install html-pdf-j

import printPDF from "printPDF";

const myPrintPDF = new printPDF(); // 创建打印对象
const printArea = ref(); // 打印区域的ref
const printProgress = ref(0); // 打印进度

const printPdfFn = () => {
  nextTick(() => {
    myPrintPDF.onStart((progress) => {
      printProgress.value = progress;
      console.log("开始:", progress, "%");
    });

    myPrintPDF.onEnd((progress) => {
      printProgress.value = progress;
      console.log("结束:", progress, "%");
    });

    myPrintPDF
      .init({
        filename: new Date().getTime(), // 导出文件名
        debug: true, // 调试模式
        el: printArea.value, // 打印区域的dom
      })
      .onProgress((progress) => {
        printProgress.value = progress;
        console.log("当前进度:", progress, "%");
      })
      .save();
  });
};

<button @click="printPdfFn">打印</button>
<div>进度: {{ printProgress }}</div>
<div ref="printArea">
  <div class="page" :id="`id${item}`" v-for="(item) in  6">page{{ item }}</div>
</div>