Question

我已经看到了多个与此类似相似的问题，所以我一开始就犹豫不决。但没有任何建议解决我的问题，我似乎无法弄清楚自己的错误。

对于我为一个客户制作的项目，他们希望能够将客户的报价（使用在线表单生成）转换为PDF。很简单。由于整个项目都是PHP，我使用了以下简单的过程：

将报价另存为临时HTML文件
使用WkHTMLtoPDF将HTML文件转换为PDF
输出此PDF文件
清理（删除临时文件）

直到他们更换服务器一直有效。新服务器有防火墙。

首先，PDF转换步骤返回一个防火墙页面，说明服务器无法建立出站连接。要解决此问题，我直接提供HTML文件而不是链接到它（/var/www/mysite/temp/18382.html而不是www.example.com/temp/18382.html）。这转换了HTML，但防火墙阻止了加载CSS和图像

我可以直接将CSS嵌入网站而不是链接到它（使用<style>标签）来克服CSS，但这对图像不起作用

我首先尝试使用相对链接。我将<img src="http://www.example.com/temp/image.jpg" />更改为<img src="./image.jpg" />。这没用。

接下来我尝试<img src="file:///var/www/mysite/temp/image.jpg" />，但这不起作用，

我阅读并查看了WkHTMLtoPDF手册，我尝试了几个不同的命令行参数，例如--enable-local-file-access，--enable /var/www/mysite/temp/和--images，但似乎没有任何解决方法

Answer 1

在我的情况下 - wkhtmltopdf版本0.12.2.1（带有修补的qt） - 使用绝对路径向头部添加基本标记，确保图像和css确实已加载。

return $this->belongsTo('App\TagKey', 'tag_key_id');

Answer 2

如果您在Linux上，请检查图像的所有权。对于Windows，您可以在http://code.google.com/p/wkhtmltopdf/wiki/Usage找到一些信息。

我尝试了不同类型的图像路径：

<img src="file:///var/www/testpdf/flowers.jpg"><br>
<img src="./flowers.jpg"><br>
<img src="flowers.jpg"><br>
<img src="/var/www/testpdf/flowers.jpg"><br>

所有图像都显示正确。我没有使用任何命令行参数（仅wkhtmltopdf /var/www/testpdf/makepdf.html makepdf.pdf）

Answer 3

对于Windows，您需要在标记中使用绝对文件系统路径。例如：

<link href='C:\Projects\Hello\Hello.Web\Content\custom\home.css' rel='stylesheet' type='text/css' />

！不是http://localhost/Hello.Web/Content/custom/home.css

Answer 4

在Windows上使用路径：file:///C:/some/dir/some/file.img（注意三重/）

Answer 5

我知道这是一个相当古老的话题，但我只是遇到了同样的问题，也许这对某人有帮助。
我尝试了不同的方法，如css背景图像和使用字符串作为base64编码数据图像。有时它有帮助，有时候没有 - 我没有找到特别的规则。
原来，升级库wkhtmltopdf解决了这个问题。我使用的是版本0.12.0并升级到0.12.3

Answer 6

在从这里和网络上获得每个人的帮助后，我发现了一些对我有用的东西 - 在asp.net（c＃）中编码。

我需要通过url（不是文件路径）访问图像，因为仍然需要访问原始源html。通过故障排除，我发现了这些要点。

必须将这些标志传递到命令行进程： “-q -n --disable-smart-shrinking --images --page-size A4”
网址仍然是绝对的。
图片必须是jpg！我原本试图做一个GIF，但没有用。
我发现添加“--enable-local-file-access”没有帮助，因为它需要在图像路径中使用'\'斜杠而不是'/'斜杠，如果你没有帮助也希望使用源html（在某些浏览器中）。此外，如果您需要访问本地文件系统，则需要提供绝对路径，因为它直接从根读取并从那里开始。

希望这有助于其他人。

干杯

-y

Answer 7

您可以插入base64编码的图像，如：

<img src=data:image/png;base64,someBase64content"/>

Answer 8

对我来说，问题通过做两件事来解决： 1：在你的app / config / config.yml中 - 在knp_snappy下 - 对于选项temporary_folder，请写 ./
- 即： temporary_folder：./
2：现在在你的html.twig页面中删除资产并写下：
来自：

 <link rel="stylesheet" type="text/css" href="{{ asset('css/default_template.css') }}">

要：

 <link rel="stylesheet" type="text/css" href="css/default_template.css">

之后，它对我有用。

希望我帮助过某个人。谢谢！

Answer 9

这可能是由于SE Linux或防火墙规则导致您无法访问互联网并返回自己的服务器。您可以更新主机文件，将您的域名调用回到计算机的家庭地址。

Answer 10

图片的网址必须是绝对的，不是相对的。在树枝模板中检查以下工作示例：

<img src="{{ absolute_url(asset('images/example.png')) }}"/>

Answer 11

花了几天时间才得到wkhtmltopdf读取的Flask / Blueprint / static file / css，所以我想我会分享我学到的东西。使用Pycharm pro，最新的pdfkit和wkhtmltopdf，在Python 3.4.4上使用Win 7，Flask 0.12。

从中下载wkhtmltopdf http://wkhtmltopdf.org/downloads.html
安装它 - 安装在：

C：\ Program Files \ wkhtmltopdf \ bin \ wkhtmltopdf.exe
将pdfkit导入您的flask routes.py脚本后，插入以下行：

path_wkthmltopdf = r'C：\ Program Files \ wkhtmltopdf \ bin \ wkhtmltopdf.exe'

config = pdfkit.configuration（wkhtmltopdf = path_wkthmltopdf）

（注意这里第一行的“r”!!）

在路由中使用pdfkit时，添加“，configuration = config”作为参数，例如：

pdfkit.from_string（html_text，output_filename，configuration = config）

这告诉pdfkit在哪里寻找wkhtmltopdf。是的，你需要这样做。

现在你的烧瓶BASE TEMPLATE将“，_external = True”添加到你的css路线，例如：

（这将使wkhtmltopdf无法抛出错误，无法找到css）

现在（严重的bootstrap模板juju警告）：进入你的flask / external libraries / site-packages / flask_bootstrap / templates /base.html模板和：

一个。修复CSS链接：

添加“http：”所以它看起来像：

<link href="http:{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet" media="screen">

湾修复JS链接：

添加“http：”，以便JS链接看起来像：

<script src="http:{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>

<script src="http:{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>

以及所有这些

你的烧瓶html到pdf的转换

使用pdfkit和wkhtmltopdf

应该没有错误地运行。

注意：我从PHP转移到烧瓶中，如果您是烧瓶，请在此处发布您的解决方案。烧瓶社区比PHP社区小得多，所以我们都必须投入。

Answer 12

当浏览器呈现您的HTML时，它使用相对路径（有时在其开头有一个URL），如下所示：

dirlist =
{
  [1,1] = .
  [2,1] = ..
}

但是当WkHTMLtoPDF在您的服务器上运行时，它会直接通过文件系统与您的本地文件连接，而不是通过Web服务器。因此，对于本地文件，与浏览器不同，WkHTMLtoPDF需要实际的文件路径：

<img src="/static/images/some_picture.png">
<img src="http://www.example.com/static/images/some_picture.png">

（这适用于Python Flask）

Answer 13

要使用图像或样式生成pdf，您需要提供服务器路径，如下所示：

<img src="https://upload.wikimedia.org/wikipedia/...image.png" />

<link href="http://localhost:8080/css/file.css" media="all" rel="stylesheet" type="text/css" />

请注意第二个链接，它是样式表的本地地址，或者像第一个链接一样是远程的。文件路径对我不起作用，仅对资源的服务器路径有效。

Ps：在我的情况下，我在Intellij IDE中使用spring boot，因此我需要使IDE的缓存无效并且不能在调试模式下运行才能正常工作，否则可能不是更新内容。

Answer 14

对我来说，修复此问题的原因是删除对我的CSS文件的引用。原来我是在一个空的div中设置img { max-height: 100%; }，因此被解释为max-height：0。

因此，请检查您的CSS，那里可能有问题。这可行：

<div><img src="image.png"/></div>

在包含image.png的目录中运行命令行：

wkhtmltopdf example.html example.pdf

但这不是：

<div><img src="image.png" style = "max-height: 100%; "/></div>

因为图像被压缩到0高度。 Firefox似乎可以纠正此问题，因此并不明显。

Answer 15

请确保您拥有带有{qt补丁的）最新版本的wkhtmltopdf。
您可以实现一个助手，flask jinja使用它来区分模板是用于渲染还是仅生成pdf，或者两者都可以。
假设tmpl_bind是要绑定到模板中的数据对象，请添加一个新密钥tmpl_bind["pdf"]并将其设置为True或False。
使用wkhtmltopdf或pdfkit时，将enable-local-file-access添加到选项对象。
现在创建一个名为static_file

的辅助函数

def static_file(filename, pdf=False):
    # wkhtmltopdf only read absolute path
    if pdf:
        basedir = os.path.abspath(app.root_path)
        return "".join([basedir, "/static/", filename])
    else:
        return url_for('static', filename = filename)

正如我们所说，wkhtmltopdf对于某些操作系统仅在包含文件的绝对路径时读取文件。请注意，您可以根据自己的应用结构从app.root_path添加或删除部分，但这在大多数情况下都可以使用。

在应用配置中，如果导入static_file函数（如果它在另一个文件中），请在此行添加

app.jinja_env.globals['static'] = static_file

最后，在模板导入文件中，通过调用static_file帮助器函数

<link href="{{ static('css/style.css', pdf) }}" rel="stylesheet" />
<img src="{{ static('assets/images/logo.svg', pdf) }}" class="logo">

WkHTMLtoPDF没有加载本地CSS和图像

15 个答案: