feat: 中文字体乱码问题

src/pages/deviceInfo/testPDF.vue

@@ -228,6 +228,97 @@
 <script setup lang="ts">
 import html2canvas from 'html2canvas'
 import jsPDF from 'jspdf'
+import '@/utils/YaHei-normal'
+
+// async function generateAndPrintPDF() {
+//   const printArea = document.getElementById('printArea')
+//   if (!printArea) {
+//     console.error('打印区域未找到')
+//     return
+//   }
+
+//   try {
+//     // 将 HTML 内容转为 Canvas
+//     const canvas = await html2canvas(printArea, {
+//       scale: window.devicePixelRatio * 2,
+//     })
+
+//     // 获取 Canvas 的宽高
+//     const canvasWidth = canvas.width
+//     const canvasHeight = canvas.height
+
+//     // 将 Canvas 转为图片数据
+//     const imgData = canvas.toDataURL('image/jpeg', 1.0)
+
+//     // 创建 jsPDF 实例
+//     const pdf = new jsPDF('p', 'mm', 'a4')
+//     const pdfWidth = pdf.internal.pageSize.getWidth() // PDF 页面的宽度
+//     const pdfHeight = pdf.internal.pageSize.getHeight() // PDF 页面的高度
+
+//     const headerHeight = 20 // Header 高度
+//     const footerHeight = 20 // Footer 高度
+//     const contentHeight = pdfHeight - headerHeight - footerHeight // 内容区域高度
+
+//     // 计算 PDF 中图片的等比例高度
+//     const imgHeight = (canvasHeight * pdfWidth) / canvasWidth
+
+//     // 如果内容高度小于一页，直接添加到 PDF
+//     if (imgHeight <= contentHeight) {
+//       pdf.text('Header Title', pdfWidth / 2, headerHeight / 2, { align: 'center' }) // 添加 Header
+//       pdf.addImage(imgData, 'JPEG', 0, headerHeight, pdfWidth, imgHeight)
+//       pdf.text('Footer Text', pdfWidth / 2, pdfHeight - footerHeight / 2, {
+//         align: 'center',
+//       }) // 添加 Footer
+//     } else {
+//       // 分页逻辑
+//       let position = 0 // 当前绘制的起始位置
+//       while (position < canvasHeight) {
+//         const pageCanvas = document.createElement('canvas')
+//         pageCanvas.width = canvasWidth
+//         pageCanvas.height = (contentHeight * canvasWidth) / pdfWidth
+
+//         const pageCtx = pageCanvas.getContext('2d')
+//         pageCtx?.drawImage(
+//           canvas,
+//           0,
+//           position, // 从 Canvas 的哪部分开始截取
+//           canvasWidth,
+//           pageCanvas.height,
+//           0,
+//           0,
+//           canvasWidth,
+//           pageCanvas.height
+//         )
+
+//         const pageImgData = pageCanvas.toDataURL('image/jpeg', 1.0)
+
+//         // 添加 Header
+//         pdf.text('Header Title', pdfWidth / 2, headerHeight / 2, { align: 'center' })
+
+//         // 添加当前页到 PDF
+//         pdf.addImage(pageImgData, 'JPEG', 0, headerHeight, pdfWidth, contentHeight)
+
+//         // 添加 Footer
+//         pdf.text('Footer Text', pdfWidth / 2, pdfHeight - footerHeight / 2, {
+//           align: 'center',
+//         })
+
+//         position += pageCanvas.height // 更新绘制起点
+
+//         // 如果还有内容未绘制，添加新页
+//         if (position < canvasHeight) {
+//           pdf.addPage()
+//         }
+//       }
+//     }
+
+//     // 打开 PDF 打印对话框
+//     pdf.autoPrint()
+//     window.open(pdf.output('bloburl'), '_blank')
+//   } catch (error) {
+//     console.error('生成 PDF 时出错:', error)
+//   }
+// }
 
 async function generateAndPrintPDF() {
   const printArea = document.getElementById('printArea')
@@ -250,6 +341,7 @@ async function generateAndPrintPDF() {
     const pdfWidth = pdf.internal.pageSize.getWidth()
     const pdfHeight = pdf.internal.pageSize.getHeight()
     pdf.setFontSize(12)
+    pdf.setFont('YaHei')
 
     const headerHeight = 20 // Header 高度
     const footerHeight = 20 // Footer 高度
@@ -262,7 +354,7 @@ async function generateAndPrintPDF() {
     const imgHeight = (canvasHeight * contentWidth) / canvasWidth
 
     const PDFInsertTextX = pdfWidth / 2
-    const PDFInsertTextY = pdfHeight / 2
+    const PDFInsertTextY = headerHeight / 2
     const PDFInsertFooterTextY = pdfHeight - footerHeight / 2
 
     // 如果内容高度小于一页，直接添加到 PDF
@@ -292,6 +384,10 @@ async function generateAndPrintPDF() {
 
         const pageImgData = pageCanvas.toDataURL('image/jpeg', 1.0)
 
+        pdf.text('北京比塔技术服务有限公司', PDFInsertTextX, PDFInsertTextY, {
+          align: 'center',
+        })
+
         // 添加当前页到 PDF，左右边距调整
         pdf.addImage(
           pageImgData,