如何在pdfmake生成的PDF文件中添加页面边框？

嘿，我刚好在项目里折腾过pdfmake的页面边框实现，给你分享几个亲测有效的方案：

方法一：利用页面背景绘制全局边框 #

pdfmake支持为每个页面设置背景内容，我们可以在背景层绘制一个和页面尺寸匹配的矩形，通过调整坐标和边距来实现边框效果。这种方法会给所有页面加上统一的边框，非常适合全局需求：

const docDefinition = {
  // 先设置页面边距，避免内容和边框重叠
  pageMargins: [40, 60, 40, 60], // 上、右、下、左 边距（单位：pt）
  background: function(currentPage, pageCount) {
    // 基于默认A4页面尺寸（595pt宽 × 842pt高）计算边框坐标
    return {
      canvas: [
        {
          type: 'rect',
          x: 30, // 比左边距小10pt，留出边框宽度
          y: 50, // 比上边距小10pt
          w: 595 - 60, // 页面总宽度减去左右偏移量（30×2）
          h: 842 - 100, // 页面总高度减去上下偏移量（50×2）
          lineWidth: 2, // 边框粗细
          lineColor: '#000000' // 边框颜色
        }
      ]
    };
  },
  content: [
    // 这里放你的PDF内容
    '这是带全局边框的PDF页面示例',
    // 可以加分页测试多页面效果
    { text: '', pageBreak: 'after' },
    '第二页同样会显示边框'
  ]
};

pdfMake.createPdf(docDefinition).open();

方法二：为特定页面设置差异化边框 #

如果需要给不同页面设置不同样式的边框（比如第一页用红色粗边框，其他页用灰色细边框），可以在背景函数里根据当前页码做判断：

background: function(currentPage, pageCount) {
  // 根据页码动态调整边框样式
  const borderConfig = currentPage === 1 
    ? { lineWidth: 3, lineColor: '#ff4444' }
    : { lineWidth: 1, lineColor: '#cccccc' };

  return {
    canvas: [
      {
        type: 'rect',
        x: 20,
        y: 20,
        w: 595 - 40,
        h: 842 - 40,
        ...borderConfig
      }
    ]
  };
}

额外技巧：自定义边框样式 #

你还可以调整参数实现更多样式的边框：

• 虚线边框：添加dashPattern: [5, 3]参数（5pt实线+3pt空白的循环）
• 圆角边框：添加radius: 5参数设置圆角半径
• 仅单边边框：可以拆分矩形为四条独立的线，只保留需要的边

虚线边框示例： #

{
  type: 'rect',
  x: 30,
  y: 50,
  w: 555,
  h: 822,
  lineWidth: 1,
  lineColor: '#666666',
  dashPattern: [5, 3]
}

注意：如果使用了自定义页面尺寸（比如pageSize: 'letter'），记得对应调整矩形的w和h——Letter纸的尺寸是612pt×792pt。

这些方法都是我实际项目里验证过的，你可以根据自己的需求调整参数～

内容的提问来源于stack exchange，提问作者Haseeb Rehman