使用Vue时wkhtmltopdf渲染空白页面

Question

当我创建一个新的 Vue 项目并使用 wkhtmltopdf 时，它会呈现一个空白的 PDF 页面。

重现步骤：

1. vue create hello-world

2. 选择：默认（Vue 3、babel、eslint）

3. npm run serve

4. 检查浏览器是否正常工作：http://localhost:8081

5. ./wkhtmltopdf --javascript-delay 10000 --debug-javascript "http://localhost:8081/" "test.pdf"

回复是：

Loading pages (1/6)
Warning: undefined:0 TypeError: 'undefined' is not a function
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Done

PDF 已渲染，但页面为空白。我可能会说，10 秒的 JavaScript 延迟足以在加载后渲染它。

这只是一个例子来说明我的问题。我的真实项目比较复杂，因为我使用了webpack、axios等。虽然我在上面的示例中收到一个警告，但在我的实际项目中处理 wkhtmltopdf 期间却收到多个警告：

Loading pages (1/6)
Warning: http://localhost:8080/build/runtime.js:1 SyntaxError: Parse error
Warning: http://localhost:8080/build/vendors-node_modules_core-js_internals_set-species_js-node_modules_core-js_modules_es_array_f-0880e9.js:7 SyntaxError: Parse error
Warning: http://localhost:8080/build/vendors-node_modules_axios_index_js-node_modules_core-js_modules_es_array_reverse_js-node_mod-330420.js:7 SyntaxError: Parse error
Warning: http://localhost:8080/build/src_Resources_js_templateLoader_js.js:8 SyntaxError: Parse error
Warning: http://localhost:8080/build/app_pdf.js:8 SyntaxError: Parse error
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Done

结果也是一个空白的 PDF 页面。在我的实际项目中，URL 在浏览器中工作正常，就像上面的 hello-world 项目一样。

但无论如何，让我们关注这个 Hello World 示例。我应该做些什么来使 wkhtmltopdf 与 Vue 一起工作？感谢您的帮助。

编辑：崩溃发生在到达应用程序脚本之前。因此，在这里分享我的应用程序代码似乎无关紧要。因此，使用 wkhtmltopdf 的 --window-status 选项也将不起作用。

Answer 1

表弟，有什么办法吗？我也有同样的问题