如何在jsPDF中设置宽高并实现HTML内容响应式适配？

问题分析 #

你的代码存在两个核心问题：一是自定义了非A4的尺寸参数，无法生成标准A4文件；二是缺少内容适配和分页配置，导致使用A4格式时内容被截断而非自动换行分页。

解决步骤及修正代码 #

1. 给目标HTML添加响应式样式

首先确保#myid元素内的内容能适配A4宽度，添加以下CSS：

#myid {
  max-width: 595px; /* 对应A4纸宽度的像素值（595.28pt） */
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* 适配内部元素，避免溢出 */
#myid img {
  max-width: 100%;
  height: auto;
}
#myid table {
  width: 100%;
  border-collapse: collapse;
}
#myid p, #myid div {
  word-wrap: break-word;
}

2. 修正jsPDF代码，添加适配配置

以下是完整的修正代码，包含A4初始化、分页及内容适配设置：

const Click_Download = async () => {
  (window as any).html2canvas = html2canvas; // 修正原代码的笔误（html22canvas）
  // 初始化A4纵向PDF，单位为pt（jsPDF默认单位）
  const doc = new jsPDF('p', 'pt', 'a4');
  const targetElement = document.querySelector("#myid");
  
  if (!targetElement) return;

  (doc as any).html(targetElement, {
    width: 555.28, // A4宽度减去左右各20pt边距，确保内容不溢出
    windowWidth: targetElement.scrollWidth, // 匹配目标元素的实际宽度
    autoPaging: 'text', // 基于文本自动分页，替代截断
    margin: [20, 20, 20, 20], // 设置页面边距
    html2canvas: {
      scale: 2, // 提升渲染清晰度，避免模糊
      logging: false,
      useCORS: true // 若包含跨域图片需开启
    },
    callback: function(pdf: any) {
      pdf.save("mypdf.pdf"); // 修正原代码的引号语法错误
    }
  });           
}

3. 关键配置说明

• new jsPDF('p', 'pt', 'a4'): 直接指定A4格式，p代表纵向，l代表横向
• autoPaging: 'text': 让jsPDF自动识别文本换行点，生成新页面而非截断内容
• width: 控制PDF内渲染内容的宽度，减去边距保证内容在页面范围内
• html2canvas.scale: 提高渲染倍率，解决PDF内容模糊的问题

内容的提问来源于stack exchange，提问作者Shilu Kumari