如何使用html2canvas和html2pdf将HTML页面适配为A4尺寸单页PDF

优化方案 #

1. 修复依赖冲突 #

html2pdf.bundle.min.js已内置适配版本的html2canvas，你额外引入的0.4.1版本html2canvas版本过旧，会和内置版本冲突导致渲染高度计算错误，直接删除以下引入即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

2. 调整导出JS配置 #

新增强制不分页配置，修复图片质量参数错误（jpeg质量取值范围为0-1，你填的4属于无效值），修改后的JS代码如下：

document.querySelector('#temp').contentEditable = true;

function createpdf() {
  let element = document.querySelector('#temp')
  html2pdf(element, {
    margin: 1,
    filename: 'MyResume.pdf',
    image: {
      type: 'jpeg',
      quality: 0.9
    },
    html2canvas: {
      letterRendering: true,
      scale: 3,
      useCORS: true
    },
    jsPDF: {
      orientation: 'portrait',
      unit: 'cm',
      format: 'a4'
    },
    // 核心配置：禁用自动分页
    pagebreak: { mode: 'avoid-all' }
  }).save()
}

3. 修复CSS无效属性 #

padding不支持负值，你之前写的所有负padding全部要替换为负margin才能起到压缩间距的效果，同时调整容器尺寸适配A4大小，修改后的核心CSS如下：

@page {
  size: A4;
  margin: 1cm;
}
/* 可调整字号压缩内容高度 */
p, b, li{
  font-size: 11px;
}
body {
  margin: 0px;
}
.border {
  border-bottom: 1px solid red;
  margin-bottom: -4px;
}
.spacing {
  margin-top: -10px;
}
.paddingtop {
  padding-top: 15px;
  border-top: 1px solid red;
}
.paddingbottom {
  margin-bottom: -14px;
}
.right1 {
  padding-left: 15px;
  margin-left: 130px;
  margin-top: -53px;
}
.right2 {
  padding-left: 15px;
  margin-left: 130px;
  margin-top: -60px;
}
.right3 {
  padding-left: 15px;
  margin-left: 130px;
  margin-top: -52px;
}
.blankline {
  padding-bottom: 6px;
}
[contenteditable]:focus {
  outline: 0px solid transparent;
}
#page {
  width: 19cm;
  min-height: 27.7cm;
  box-sizing: border-box;
  background-color: white;
  margin: 1% auto 1% auto;
  padding: 0.2cm 1cm 1cm 1cm;
  box-shadow: 0px 0px 20px 0px #000;
  line-height: 1.4em;
  text-align: left;
}

4. 可选微调 #

如果修改后还是有轻微溢出，可以再缩小全局字号，或者减少各模块的上下间距，就能刚好把所有内容塞入单页A4。

内容的提问来源于stack exchange，提问作者Nitin Saini