使用pdfmake生成PDF时，如何获取html2canvas返回的Pending Promise值？

我来帮你解决这个问题——你现在遇到的是异步Promise的典型问题：直接把html2canvas返回的Promise赋值给img.token，得到的只是Promise对象本身，而不是它最终resolve后的图片DataURL。要拿到真正的结果，你需要等待Promise完成，下面给你几种可行的解决方案：

方法1：使用async/await（最直观易读） #

async/await是ES6+的语法，能让异步代码看起来像同步代码，非常适合这种场景。注意await必须放在async标记的函数内部：

// 封装获取图表图片的异步函数
async function getChartImage() {
  // 等待html2canvas完成截图，拿到canvas对象
  const canvas = await html2canvas(document.getElementById("chartContainer"));
  // 把canvas转为jpeg格式的DataURL
  const imgDataUrl = canvas.toDataURL("image/jpeg", 1.0);
  return imgDataUrl;
}

// 在另一个async函数里使用图片
async function generatePDF() {
  // 等待拿到图片的DataURL
  const imgToken = await getChartImage();
  // 现在你可以在这个函数范围内自由使用imgToken了
  const img = { token: imgToken };
  console.log(img.token); // 这里输出的是真正的DataURL，不再是pending的Promise
  
  // 接下来把这个img对象传给pdfmake做PDF生成
  // 比如：pdfmake.createPdf({ content: [img] }).download();
}

// 调用函数触发流程
generatePDF();

方法2：使用链式then回调（兼容旧环境） #

如果你的运行环境不支持async/await，可以把使用图片的逻辑放在then回调里——因为只有当Promise resolve后，then里的代码才会执行：

let img = {};

html2canvas(document.getElementById("chartContainer"))
  .then(canvas => {
    // 把canvas转为DataURL
    return canvas.toDataURL("image/jpeg", 1.0);
  })
  .then(imgDataUrl => {
    // 这里拿到了真正的DataURL，赋值给img.token
    img.token = imgDataUrl;
    console.log(img.token); // 正常输出DataURL
    
    // 在这里执行需要用到图片的逻辑，比如生成PDF
    pdfmake.createPdf({ content: [img] }).download();
  })
  .catch(error => {
    // 处理截图失败的情况
    console.error("图表截图出错：", error);
  });

// 注意：如果在then回调外面直接打印img.token，会拿到undefined，因为Promise还没完成！

处理多个图表的情况（你提到要获取多个图表） #

如果需要同时处理多个图表截图，可以用Promise.all来并行处理所有截图请求，等所有图片都准备好后再一起使用：

// 获取所有图表容器（假设你给图表容器加了.chart-container类）
const chartContainers = document.querySelectorAll(".chart-container");

// 生成一个包含所有截图Promise的数组
const imagePromises = Array.from(chartContainers).map(container => 
  html2canvas(container).then(canvas => canvas.toDataURL("image/jpeg", 1.0))
);

// 等待所有截图完成
Promise.all(imagePromises)
  .then(imgDataUrls => {
    // imgDataUrls是一个数组，每个元素对应一个图表的DataURL
    console.log("所有图表截图完成：", imgDataUrls);
    
    // 把这些图片转为pdfmake需要的格式
    const pdfImages = imgDataUrls.map(url => ({ token: url }));
    // 生成包含所有图表的PDF
    pdfmake.createPdf({ content: pdfImages }).download();
  })
  .catch(error => {
    console.error("部分图表截图失败：", error);
  });

总结一下：Promise是异步操作，必须等待它完成（resolve）才能拿到结果，所以不能直接同步读取Promise对象的值，必须通过then回调或者async/await来获取最终结果。

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