2

新的 Chrome 64 安全更新似乎破坏了 htmlToImage 库。没有任何样式被正确计算并且呈现为好像根本没有应用样式一样。

有谁知道解决方法/修复？我是否需要将我的 CSS 放在服务器上并允许 CORS？

4

1 回答 1

1

我刚刚修复了这个错误。

分叉库并提出拉取请求。在它被合并之前，您可以使用分叉的 repo：https ://github.com/kmap-io/html-to-image

html-to-image通过将您的目标替换为package.json：

"html-to-image": "git+https://github.com/kmap-io/html-to-image.git"

关于错误

Chrome 抱怨（抛出错误）试图读取不存在的属性。Firefox 也会抱怨，但他们只会抛出警告，而不是错误。修复包括更换

if (sheet.cssRules) {
  ...

和

if (sheet.hasOwnProperty('cssRules')) {
  ...

没有缺点（即：当cssRules存在时sheet- 这是一个样式表 - 脚本遍历规则并将它们添加到文档中，如预期的那样）。

如何修补（直到它被合并）。

出于某种原因，简单地用我提交更改的 fork 替换库的 repo 不适用于此包。我要求 lib 的作者添加关于如何在拉取请求后构建的说明，因为他们在自述文件中声明拉取请求和贡献是受欢迎的。在此之前，以下是如何使用以下方法应用修复patch-package：

  • 添加"prepare": "patch-package"inside scripts, 在你的项目中package.json
  • npm i patch-package --save-dev
  • 在node_modules/html-to-image/lib/embedWebFonts.js中，将第 7 行从
try {

到

if (sheet.hasOwnProperty('cssRules')) try {
  • npx patch-package html-to-image

如果您有一个从头开始构建项目的部署脚本，则需要在调用之前应用补丁npm run build（或类似的，取决于您的堆栈）：

git apply --ignore-whitespace patches/*.patch

就是这样。

当修复将被合并时，您需要运行：

npx patch-package html-to-image --reverse
于 2018-09-27T11:38:36.470 回答