从 Vue 模板生成 PDF答案

【问题标题】：Generate PDF from Vue template从 Vue 模板生成 PDF
【发布时间】：2018-12-18 00:30:06
【问题描述】：

我需要为使用 Vue 呈现的页面创建可下载的 pdf。我们使用的 html 到模板 API 是 DocRaptor。

有两种可能的方法：

将 url 传递给页面，然后将其呈现为 PDF。 问题。
- 页面在我们的身份验证之后，我是否在标头中传递会话令牌？
- 页面正在调用我们的 API，这意味着上述内容甚至都不重要...我假设您的页面只会获取原始 html，而不是在 DocRaptor POST 请求中运行 JS。
在 DocRaptor POST 请求中传入原始 html，并带有样式。问题
- 我们不使用服务器端渲染，因此无法访问漂亮的预渲染 html 字符串
- 弄清楚如何将 vue 编译为原始 html

上面的两个选项似乎是要走的路。希望选项 1 起作用，但我不知道如何工作 - 这让我选择了选项 2，但是除了服务器端渲染之外，没有多少谷歌搜索给了我答案。我什至可以为单页做到这一点吗？我假设整个应用程序都被渲染了。

【问题讨论】：

【解决方案1】：

假设您有某种身份验证机制（例如短期令牌），选项 1 可以工作。 DocRaptor 确实执行了你的 javascript，所以它应该可以工作。

【讨论】：

【解决方案2】：

您可以在客户端渲染到一个不可见的元素（或者甚至可能是可见的，让用户认为这是一个预览），然后使用旧好的innerHTML：

let html = document.querySelector('#render-placeholder').innerHTML;

然后将其发布到服务器以转发到 pdf 渲染器（以保持服务访问令牌的机密性）。

【讨论】：