Skip to main content

支持添加第三方JS库

PagePlug支持自定义 Javascript 库了！！！能为 PDF 生成、CSV 解析、分析、身份验证、错误记录等复杂用例提供了更高级的功能，还能支持您通过自定义库来操作或转换数据，这些外部库提供了额外的方法来帮助您构建复杂的应用程序和业务逻辑。

1、库的兼容性​

PagePlug 仅与支持 UMD 构建的库兼容。如果库支持 UMD 构建格式，则库索引文件的源代码应符合此 基本模式。root大多数兼容库的索引文件可以在, /umd 或 文件夹下找到 /browser ，并具有.min.js文件扩展名。如果您希望使用的库不支持 UMD 构建，您可以使用 browserify 生成一个并将其托管在您选择的 CDN 中。

  • 有效网址：

https://cdn.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js

  • 有效网址，但不支持的构建格式：

https://cdn.jsdelivr.net/npm/uuid@9.0.0/dist/index.js

  • 网址无效。不指向索引文件：

https://www.jsdelivr.com/package/npm/datejs

2、安装外部JS库​

PagePlug在安装JS库的时候，菜单栏会有一些推荐的库可供选择，您只需单击安装图标即可进行安装。但是，如果您想使用 URL 安装特定的库，过程也很简单。要安装其他库：

  • 在jsDelivr 或 UNPKG等流行的 CDN 服务上 查找兼容的库。
  • 将 URL 复制到其索引文件并将其粘贴到 PagePlug 上以开始安装。
  • 导航到资源管理器选项卡
  • 单击+旁边的标志Libraries。
  • 将 URL 粘贴到指定字段中。例如：
https://cdn.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js
  • 之后点击安装

3、案例演示​

可以像在应用内通过{{ }}的方式使用 JavaScript 一样在内部使用外部库，提供一些示例：

export default {
  myVar1: [],
  myVar2: {},
  myFun1 () {
  // write code here
  // this.myVar1 = [1,2,3]
 },
  createWorkbook: async () => {
    const workbook = new ExcelJS.Workbook();
<strong>    console.log(workbook, "66666")
</strong>    workbook.creator = "Tomato";
    workbook.lastModifiedBy = "Tomato";
    workbook.created = new Date();
    workbook.modified = new Date();
    workbook.calcProperties.fullCalcOnLoad = true;

    const worksheet = workbook.addWorksheet("Tomato page 1", {
      properties: { tabColor: { argb: "#FF0000" } },
      pageSetup: { paperSize: 9, orientation: "landscape" },
    });

    worksheet.getCell("A1").value = "Hello, World!";
    worksheet.getCell("B1").value = "What time is it?";javaja
    worksheet.getCell("A2").value = 7;
    worksheet.getCell("B2").value = "12pm";

    const buf = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buf], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });
    const url = URL.createObjectURL(blob);

    await download(url, "test.xls");
  }
}

4、注意事项​

由于平台限制，您可能无法安装或使用某些库的方法：

如果您在连接外部库时遇到困难，可以参考JavaScript 错误故障排除指南