安裝

cnpm install vue3-print-nb
cnpm install html2canvas
cnpm install jspdf

代碼

  <div class="print-preview">
    <div class="flex f-end exportBtn">
      <a-button v-print="print">打印</a-button>
      <a-button class="ml-10" @click="exportToPDF('printFrom')">導出PDF</a-button>
    </div>
    <div class="print-container">
      <div id="printFrom">
        <h3 class="title">員工入職登記表</h3>
        <div class="flex f-between">
          <a-form-item label="公司">{{ formModel.rosterFromDetailResp?.companyStr }}</a-form-item>
          <a-form-item label="部門">{{ formModel.rosterFromDetailResp?.departmentStr }}</a-form-item>
          <a-form-item label="崗位">{{ formModel.rosterFromDetailResp?.positionStr }}</a-form-item>
          <a-form-item label="入職日期">{{ formModel.rosterFromDetailResp?.joinWorkDate }}</a-form-item>
        </div>
 </div>
 </div>
 </div>
import { ref, reactive, toRefs, onMounted } from 'vue'
import print from 'vue3-print-nb'
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
const print = ref({
  id: 'printFrom',//這里的id就是上面我們的打印區(qū)域id胞此，實現(xiàn)指哪打哪
  // popTitle: '', // 打印配置頁上方的標題
  extraHead: '', // 最上方的頭部文字稳衬，附加在head標簽上的額外標簽鬼譬，使用逗號分割
  preview: false, // 是否啟動預覽模式，默認是false
  previewTitle: '', // 打印預覽的標題
  previewPrintBtnLabel: '', // 打印預覽的標題下方的按鈕文本遵蚜，點擊可進入打印
  zIndex: 20002, // 預覽窗口的z-index，默認是20002车遂，最好比默認值更高
})
const exportToPDF = async (elementId) => {
  const element = document.getElementById(elementId);

  // 使用 html2canvas 將 DOM 轉(zhuǎn)換為 canvas 圖像
  const canvas = await html2Canvas(element, {
    scale: 2,
    logging: true, // 開啟日志以便調(diào)試
    ignoreElements: (el) => el.style.display === 'none' // 忽略隱藏元素
  });
  const imgData = canvas.toDataURL('image/jpeg', 0.7); // 使用 JPEG 格式

  // 獲取 canvas 的寬度和高度（單位：像素）
  const imgWidth = canvas.width;
  const imgHeight = canvas.height;

  // 定義轉(zhuǎn)換比例因子（從像素到毫米）
  const ratio = 25.4 / 96; // 1 英寸 = 25.4 mm, 默認屏幕分辨率為 96 dpi

  // 計算頁面尺寸（單位：毫米）
  const pdfWidth = imgWidth * ratio;
  const pdfHeight = imgHeight * ratio;

  // 創(chuàng)建一個新的 jsPDF 實例浊吏，動態(tài)設置頁面大小
  const orientation = pdfWidth > pdfHeight ? 'l' : 'p'; // 根據(jù)寬高比選擇方向
  const pdf = new JsPDF({
    orientation,
    unit: 'mm',
    format: [pdfWidth, pdfHeight]
  });

  // 添加白色背景，避免陰影
  pdf.setFillColor(255, 255, 255);
  pdf.rect(0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight(), 'F');

  // 添加圖像到 PDF 文檔
  // 添加圖像到 PDF 文檔時帆焕，確保寬度和高度與 PDF 頁面完全匹配
  pdf.addImage(imgData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());

  // 保存 PDF 文件
  pdf.save('員工入職登記表.pdf');
}

<style scoped lang="less">
.print-preview {
  padding: 10px 0;
  position: relative;

  .exportBtn {
    position: sticky;
    top: 10px;
    margin-right: 40px;
  }
}

.print-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}


#printFrom {
  text-align: center;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  page-break-inside: avoid;

  th,
  td {
    font-size: 14px;
    font-weight: normal;
    min-width: 100px;
    max-width: 156px;
    white-space: wrap;
    text-align: center;
    padding: 0 4px;
    height: 27px;
  }
}

/* 定義單選按鈕組的基本樣式 */
.radio-group {
  display: flex;
  align-items: center;
}

/* 隱藏原始的單選按鈕 */
input[type="radio"] {
  display: none;
}

/* 定義標簽的基礎樣式 */
label {
  position: relative;
  padding-left: 25px;
  margin-right: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 創(chuàng)建空心圓圈作為未選中的狀態(tài) */
label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* 創(chuàng)建實心圓圈作為選中的狀態(tài) */
input[type="radio"]:checked+label::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  left: 3px;
  top: 3px;
  background-color: #3498db;
  border-radius: 50%;
  transition: all 0.3s ease;
}

@media print {
  .title {
    text-align: center;
  }

  #printFrom {
    box-shadow: none;

    th,
    td {
      min-width: 100px;
      max-width: 156px;
      white-space: wrap;
    }

  }

  input[type="radio"]:checked+label::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 3px;
    top: 3px;
    background-color: #3498db;
    border-radius: 50%;
    transition: all 0.3s ease;
    -webkit-print-color-adjust: exact !important; //強調(diào)背景顏色
    color-adjust: exact !important; //強調(diào)背景顏色
  }



}

.ant-form-item {
  margin-bottom: 0px !important;
}
</style>