如何在jsReport中将CSS样式表作为asset添加到报告中

• 允许访问的资产规则配置错误：allowedFiles 仅放开了 .js 后缀的文件读取权限，没有包含 .css 格式资源，导致 CSS 文件被安全规则拦截无法加载
• HTML 结构不规范：link 标签放在了 <head> 节点外部，不符合 HTML 语法要求，即使资源能正常加载也无法被解析生效
• 若 CSS 文件存放在本地磁盘，需要确认 /css/style.css 是启动 jsreport 服务的工作目录下的正确路径，避免路径不匹配导致读取失败

首先修正 allowedFiles 规则，新增 CSS 文件的访问权限，同时调整 HTML 结构和资源引用逻辑，修正后的完整代码如下：

jsreport.render({
    template: {
      content: `
      <html>
          <head>
              <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
              <!-- 两种引用方式二选一即可，内嵌asset的方式不需要额外配置public访问，稳定性更高 -->
              <style>
                  {#asset /css/style.css}
              </style>
              <!-- 如果要使用link标签引用，需要确保assets的publicAccessEnabled为true，且路径正确 -->
              <!-- <link rel="stylesheet" type="text/css" href="/css/style.css"> -->
          </head>
          <body>
             ...
          </body>
      </html>
      `,
      engine: 'handlebars',
      recipe: 'html',
      assets: {
        // 放开js和css的访问权限，按需匹配路径
        allowedFiles: "static/**.js;css/**.css",
        publicAccessEnabled: true,
        searchOnDiskIfNotFoundInStore: true,
      },
    },
    data: newCart
  }).then((out) => {
    out.stream.pipe(res);
  }).catch((e) => {
    res.end(e.message);
  });

• 若使用 {#asset} 语法直接内嵌 CSS 到 style 标签，不需要依赖 publicAccessEnabled 配置，也不会有跨路径加载的问题，优先推荐使用该方式
• 如果 CSS 文件存放在 jsreport 的内置存储中，需要确认资源路径和上传时定义的路径完全匹配
• 路径匹配规则支持通配符 ** 匹配多层目录，* 匹配单层目录/文件名，可根据实际存储结构调整规则

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