Vue2项目中使用jsPDF生成PDF时计算数值无法显示的问题求助

问题描述 #

我在Vue2项目里用jsPDF生成PDF报告，遇到个奇怪的问题：计算出来的数值在控制台打印完全正常，但生成的PDF里这些数值就是不显示。服务器返回的totalNumberOfLicense.USED和FREE是long类型，我已经尝试转成Number了，但还是没用。

我的代码片段：

const totalBind = Number(this.totalNumberOfLicense.USED);
const totalAvailable = Number(this.totalNumberOfLicense.FREE);
const newLicenseIssued = totalAvailable + totalBind;


console.log("totalBind : ", totalBind);
console.log("Free: ", totalAvailable);
console.log("New License Issued: ", newLicenseIssued);

const licenseSummary = `Base License (New License Issued): ${newLicenseIssued},Total Bind: ${totalBind}, Total Available: ${totalAvailable}`;

doc.text(licenseSummary, leftMargin, imgY + imgHeight + 44);

控制台输出是正常的：

totalBind :  536
Free:  13525
New License Issued:  14061

但生成的PDF里显示的却是：

Base License (New License Issued): , Total Bind: , Total Available: 

有没有大佬知道怎么解决这个问题呀？

可能的解决思路 #

我之前也遇到过类似的情况，给你几个排查方向：

• 确认变量作用域与异步问题
  会不会是你生成PDF的代码执行时，this.totalNumberOfLicense还没拿到服务器返回的数据？虽然控制台打印正常，但有可能是你在异步请求完成前就调用了jsPDF的生成逻辑。你可以在生成PDF的代码前加个判断，确保数据已经加载完成：

  if (!this.totalNumberOfLicense || !this.totalNumberOfLicense.USED || !this.totalNumberOfLicense.FREE) {
    console.warn("数据还没加载完成，暂不生成PDF");
    return;
  }
  // 后续的计算和PDF生成代码
  

• 尝试其他类型转换方式
  虽然用了Number()转换，但有时候long类型的数值可能有特殊格式（比如隐藏的非数字字符？不过你控制台打印是正常的），可以试试用parseInt或者先转字符串再转数字：

  const totalBind = parseInt(this.totalNumberOfLicense.USED, 10);
  const totalAvailable = parseInt(this.totalNumberOfLicense.FREE, 10);
  // 或者
  const totalBind = Number(String(this.totalNumberOfLicense.USED));
  

• 检查模板字符串是否有隐藏问题
  有时候模板字符串里的变量可能因为某种原因被解析为空，你可以先把licenseSummary打印出来看看是不是真的包含数值，比如在doc.text前加：

  console.log("要打印到PDF的文本：", licenseSummary);
  

  如果这个打印出来是空的，那问题就出在变量拼接上；如果打印正常，那可能是jsPDF的text方法有问题，比如字体设置或者坐标超出了PDF页面范围？

• 检查jsPDF的版本和用法
  会不会是jsPDF的版本兼容性问题？比如某些旧版本处理数字转字符串有bug？可以试试升级到最新的兼容Vue2的jsPDF版本，或者换一种方式拼接文本，不用模板字符串，直接用字符串拼接：

  const licenseSummary = "Base License (New License Issued): " + newLicenseIssued + ",Total Bind: " + totalBind + ", Total Available: " + totalAvailable;
  

备注：内容来源于stack exchange，提问作者Shanta Kumar das