pdfmake中复用图片变量导致图片无法渲染，求问题原因排查

嘿，我之前也碰到过pdfmake的这个小坑！你遇到的图片无法渲染的问题，根源在于JavaScript对象的引用传递特性，结合pdfmake内部的资源处理逻辑导致的：

问题本质 #

当你定义sampleData并两次把它放进表格单元格时，你并不是传递了两个独立的图片配置对象——而是把同一个对象的引用重复使用了两次。pdfmake在处理图片资源时，会给这个对象添加一些内部标识（比如资源ID、加载状态之类的属性），当同一个对象被第二次引用时，pdfmake会因为这些已存在的内部属性，无法将它识别为一个新的、需要渲染的图片配置，最终导致图片无法正常显示。

解决办法 #

你只需要确保每次使用图片配置时，都是一个独立的对象实例就行，这里有两种简单的实现方式：

1. 用工厂函数生成新对象

写一个简单的函数，每次调用都返回一个全新的图片配置对象：

// 工厂函数，每次调用返回新的图片配置
function getSampleImage() {
  return { image: 'sampleImage.jpg', fit: [10, 10] };
}

var dd = { 
  content: [{ 
    table: { 
      body: [ 
        ['Col 1', 'Column 2', 'Column 3'], 
        [getSampleImage(), getSampleImage(), 'OK?'] 
      ]
    } 
  }]
};

2. 深拷贝原对象生成副本

如果你的图片配置比较复杂，不想写工厂函数，可以用深拷贝来创建原对象的独立副本（这里用JSON.parse(JSON.stringify())做简单深拷贝，适合没有函数、Symbol等特殊类型的对象）：

var sampleData = { image: 'sampleImage.jpg', fit: [10, 10] };
// 每次使用时深拷贝生成新对象
var dd = { 
  content: [{ 
    table: { 
      body: [ 
        ['Col 1', 'Column 2', 'Column 3'], 
        [JSON.parse(JSON.stringify(sampleData)), JSON.parse(JSON.stringify(sampleData)), 'OK?'] 
      ]
    } 
  }]
};

把上面任意一种代码放到pdfmake playground里测试，就能正常渲染两张图片啦！

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