Angular使用pdfMake生成PDF报TypeError: Cannot assign to read only property '0'错误

问题根源 #

你代码的核心问题是给pdfMake的table传入了错误格式的body数据，触发了类型报错：

1. table.body要求是二维数组，每一行都是一个独立的子数组。你初始化rows时直接把'Price'、'Quantity'两个字符串作为一维数组元素，pdfMake渲染时会把第一个字符串'Price'当成整行数据，尝试操作字符串的索引位修改内容，而字符串是只读的，就抛出了你遇到的报错。
2. 列数不匹配：你给table的widths定义了3列的宽度，但是表头和数据行都只写了2个字段，列数不一致也会导致渲染异常。
3. 多余的错误类型转换：你把数组类型的行数据lign强转为string类型塞进rows，完全不符合pdfMake的表格数据格式要求。

修正后的代码 #

public generatePDF(truck: Truck, orderItems: OrderDetails[]) { 
  // 初始化二维数组，第一个元素是表头行，对应3列
  let rows: any[][] = [['商品名称', '单价（元）', '购买数量']];
  let total = 0; // 可直接计算订单总价
  orderItems.forEach((item) => {
    // 每行是一个子数组，和3列对应，商品名优先取title，没有就取truckMenu中的名称
    const row = [
      item.title || item.truckMenu?.name || '未知商品',
      item.price?.toFixed(2) || 0,
      item.quantity
    ];
    rows.push(row);
    // 累加总价
    total += (item.price || 0) * item.quantity;
  })  
 
  let docDefinition = {
    content: [
      {  
        text: truck.name,  
        fontSize: 20,  
        alignment: 'center',  
        color: '#FF4F02',
        margin: [0, 20],
      },  
      {  
        text: '发票',  
        fontSize: 14,  
        bold: true,  
        alignment: 'left',  
        decoration: 'underline',  
        color: '#000',
        margin: [0, 20]
      },
      {
        table: {
          widths: ['*', 70, 50],
          body: rows
        }
      },
      {
        text: `总计 : ${total.toFixed(2)} 元`,
        fontSize: 14,
        alignment: 'right',
        margin: [0,20]
      },
      {
        text: '感谢惠顾',
        fontSize: 12,
        margin: [0,20]
      }
    ],
  }  
  pdfMake.createPdf(docDefinition).open();  
}   

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