Html WkHTMLtoPDF 不加载本地 CSS 和图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16627310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WkHTMLtoPDF not loading local CSS and images
提问by stevendesu
I've seen multiple questions that are very similarto this one, so I was hesitant at first to post it. But nothing suggested resolved my issue and I can't seem to figure out what's wrong myself.
我已经看到多个问题与这个问题非常相似，所以我一开始犹豫是否要发布它。但是没有任何建议可以解决我的问题，我似乎无法弄清楚自己出了什么问题。
For a project I made for one client they wanted to ability to convert quotes for their customers (generated using an online form) to PDFs. Simple enough. As the entire project was in PHP, I used the following simple process:
对于我为一位客户制作的项目，他们希望能够将客户的报价（使用在线表格生成）转换为 PDF。足够简单。由于整个项目都是用 PHP 编写的，所以我使用了以下简单的过程：
- Save the quote as a temporary HTML file
- Use WkHTMLtoPDF to convert the HTML file to a PDF
- Output this PDF file
- Clean up (delete temporary files)
- 将报价保存为临时 HTML 文件
- 使用 WkHTMLtoPDF 将 HTML 文件转换为 PDF
- 输出这个PDF文件
- 清理（删除临时文件）
This worked until they changed servers. The new server has a firewall.
这一直有效，直到他们更换了服务器。新服务器有防火墙。
At first the PDF conversion step was returning a firewall page saying that the server couldn't make outbound connections. To resolve this I fed the HTML file directly instead of linking to it (/var/www/mysite/temp/18382.html instead of www.example.com/temp/18382.html). This converted the HTML, but the firewall prevented the loading of CSS and images
起初，PDF 转换步骤返回一个防火墙页面，说服务器无法建立出站连接。为了解决这个问题，我直接提供了 HTML 文件而不是链接到它（/var/www/mysite/temp/18382.html 而不是 www.example.com/temp/18382.html）。这转换了 HTML，但防火墙阻止了 CSS 和图像的加载
I can overcome the CSS by simply embedding it directly in the site instead of linking to it (using the <style>tags), but this doesn't work for images
我可以通过简单地将 CSS 直接嵌入网站而不是链接到它（使用<style>标签）来克服 CSS ，但这不适用于图像
I tried using relative links first. I changed <img src="http://www.example.com/temp/image.jpg" />to <img src="./image.jpg" />. This didn't work.
我首先尝试使用相对链接。我换<img src="http://www.example.com/temp/image.jpg" />到<img src="./image.jpg" />。这没有用。
Next I tried <img src="file:///var/www/mysite/temp/image.jpg" />but this didn't work, either
接下来我试过了，<img src="file:///var/www/mysite/temp/image.jpg" />但这也不起作用
I read around and look through the WkHTMLtoPDF manual and I tried several different command line arguments like --enable-local-file-access, --enable /var/www/mysite/temp/, and --imagesbut nothing seems to fix it
我四处阅读并浏览了 WkHTMLtoPDF 手册，并尝试了几个不同的命令行参数，例如--enable-local-file-access, --enable /var/www/mysite/temp/，--images但似乎没有任何解决方法
采纳答案by Bass Jobsen
If your are on linux check the ownership of your images. For windows you will find some info on http://code.google.com/p/wkhtmltopdf/wiki/Usage.
如果您使用的是 linux，请检查您的图像的所有权。对于 Windows，您会在http://code.google.com/p/wkhtmltopdf/wiki/Usage上找到一些信息。
I tried different kind of paths to the image:
我尝试了不同类型的图像路径：
<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>
<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>
all images are showed correct. I didn't use any command line arguments
(only wkhtmltopdf /var/www/testpdf/makepdf.html makepdf.pdf)
所有图像都显示正确。我没有使用任何命令行参数（仅wkhtmltopdf /var/www/testpdf/makepdf.html makepdf.pdf）
回答by 10us
In my case - wkhtmltopdf version 0.12.2.1 (with patched qt) - adding a base tag to the head section with the absolute path made sure images and css did get loaded.
在我的情况下 - wkhtmltopdf 版本 0.12.2.1（带有补丁的 qt） - 使用绝对路径将基本标签添加到头部部分，确保图像和 css 确实被加载。
<html>
<head>
...
<base href="http://www.example.com/">
<link href="/assets/css/style.css" rel="stylesheet">
...
</head>
回答by vladimir
For Windows you need to use absolute file system paths in your markup. For instance:
对于 Windows，您需要在标记中使用绝对文件系统路径。例如：
<link href='C:\Projects\Hello\Hello.Web\Content\custom\home.css' rel='stylesheet' type='text/css' />
! not http://localhost/Hello.Web/Content/custom/home.css
！不是http://localhost/Hello.Web/Content/custom/home.css
回答by YemM
In order to have them embed, you can insert base64 encoded images like :
为了嵌入它们，您可以插入 base64 编码的图像，例如：
<img src="data:image/png;base64,someBase64content"/>
回答by Josh
When a browser renders your HTML, it uses a relative path (sometimes with a URL at the beginning of it) like this:
当浏览器呈现您的 HTML 时，它使用一个相对路径（有时以 URL 开头），如下所示：
<img src="/static/images/some_picture.png">
<img src="http://www.example.com/static/images/some_picture.png">
But when WkHTMLtoPDF is running on your server, it's interfacing with your local files directly through the filesystem, notthrough a web server. So for local files, unlike a browser, WkHTMLtoPDF wants the actual filepath:
但是当 WkHTMLtoPDF 在您的服务器上运行时，它直接通过文件系统而不是通过网络服务器与您的本地文件连接。因此，对于本地文件，与浏览器不同，WkHTMLtoPDF 需要实际文件路径：
<img src="/var/www/myapplication/static/images/some_picture.png">
(This worked for me with Python Flask)
（这对我使用 Python Flask 有用）
回答by paranoiq
on Windows use path: file:///C:/some/dir/some/file.img(notice the tripple /)
在 Windows 上使用路径：（file:///C:/some/dir/some/file.img注意三重 /）
回答by wladimirec
I know this is quite old topic, but I've just faced the same issue and maybe it will help to someone.
I tried different approaches, like css background image and using string as base64 encoded data image. Sometimes it helped, sometimes not - no particular rule I could found.
It turned out that upgrading library wkhtmltopdf solved the problem.
I was using version 0.12.0 and upgraded to 0.12.3
我知道这是一个很老的话题，但我刚刚遇到了同样的问题，也许它会对某人有所帮助。
我尝试了不同的方法，比如 css 背景图像和使用字符串作为 base64 编码的数据图像。有时它有帮助，有时没有 - 我找不到特别的规则。
原来升级库 wkhtmltopdf 解决了这个问题。我使用的是 0.12.0 版本并升级到 0.12.3
回答by Yves
After taking in everyone's kind assistance from here and around the net, I discovered something that worked for me - coding in asp.net (c#).
在接受了这里和网络上每个人的善意帮助后，我发现了一些对我有用的东西 - 在 asp.net (c#) 中编码。
I needed to access the image by url (not file path), as the original source html still needed to be accessed. Through troubleshooting, I discovered these points.
我需要通过 url（不是文件路径）访问图像，因为仍然需要访问原始源 html。通过故障排除，我发现了这几点。
These flags had to be passed in to the command line process: "-q -n --disable-smart-shrinking --images --page-size A4"
URL still has to be absolute.
Image must be a jpg! I was originally trying to do a gif, to no avail.
I discovered adding "--enable-local-file-access" didn't help, as it requires '\' slashes in the image path instead of '/' slashes, which doesn't help if you also hope to use the source html (in some browsers). Also, if you need to access the local file system, you need to provide an absolute path, as it reads straight from the root and goes from there.
这些标志必须传递给命令行进程：“-q -n --disable-smart-shrinking --images --page-size A4”
URL 仍然必须是绝对的。
图片必须是jpg！我原本是想做一个gif，但无济于事。
我发现添加“--enable-local-file-access”没有帮助，因为它需要图像路径中的“\”斜杠而不是“/”斜杠，如果您还希望使用源代码，这无济于事html（在某些浏览器中）。此外，如果您需要访问本地文件系统，您需要提供一个绝对路径，因为它直接从根目录读取并从那里开始。
Hope this helps others.
希望这对其他人有帮助。
Cheers
干杯
-y
-y
回答by pelon
Just spent a few days on getting a Flask/ Blueprint /static file/ css to be read by wkhtmltopdf, so I thought I'd share what I learned. Win 7, Flask 0.12 on Python 3.4.4, using Pycharm pro, latest pdfkit and wkhtmltopdf.
刚刚花了几天时间让 wkhtmltopdf 读取 Flask/蓝图/静态文件/css，所以我想我会分享我学到的东西。Win 7，Python 3.4.4 上的 Flask 0.12，使用 Pycharm pro、最新的 pdfkit 和 wkhtmltopdf。
download the wkhtmltopdf here
install it -mine installed on:
C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exeright after you import pdfkit into your flask routes.py script ,insert the lines:
path_wkthmltopdf = r'C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe'config = pdfkit.configuration(wkhtmltopdf=path_wkthmltopdf)
在这里下载 wkhtmltopdf
安装它 -mine 安装在：
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)
(note the "r" in the first line here !! )
（注意这里第一行的“r”！！）
when you use pdfkit in a route, add ",configuration = config" as an argument, eg:
pdfkit.from_string(html_text, output_filename, configuration = config)
当您在路由中使用 pdfkit 时，添加 ",configuration = config" 作为参数，例如：
pdfkit.from_string(html_text, output_filename, configuration = config)
this tells pdfkit where to look for wkhtmltopdf. Yes, you need to do this.
这告诉 pdfkit 在哪里寻找 wkhtmltopdf。是的，你需要这样做。
NOW in your flask BASE TEMPLATE add
, _external = Trueto your css route, eg:
现在在您的烧瓶基础模板中添加
, _external = True到您的 css 路线，例如：
(this will keep wkhtmltopdf from throwing error cant find css)
（这将防止 wkhtmltopdf 抛出错误无法找到 css）
- NOW (serious bootstrap template juju warning): go into your flask /external libraries /site-packages /flask_bootstrap /templates /base.html template and:
- 现在（严重的引导模板 juju 警告）：进入你的烧瓶 /external libraries /site-packages /flask_bootstrap /templates /base.html 模板和：
a. fix CSS link:
一种。修复 CSS 链接：
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet" media="screen">
add "http:" so it looks like:
添加“http：”所以它看起来像：
<link href="http:{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet" media="screen">
b. fix JS links:
湾 修复JS链接：
add "http:" so the JS links look like:
添加“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>
and with all this
有了这一切
your flask html to pdf conversion
你的烧瓶 html 到 pdf 转换
using pdfkit and wkhtmltopdf
使用 pdfkit 和 wkhtmltopdf
should run without errors.
应该运行没有错误。
note: I moved to flask from PHP and if you are a flask-er, please post your solutions up here. The flask community is MUCH smaller than the PHP community so we all have to pitch in.
注意：我从 PHP 迁移到烧瓶，如果您是烧瓶爱好者，请在此处发布您的解决方案。Flask 社区比 PHP 社区小得多，所以我们都必须参与其中。
回答by Tiesco
- 在 knp_snappy 下
- 对于选项temporal_folder写././
-i.e:IE：temporary_folder: ./ 临时文件
夹：./2：现在在您的 html.twig 页面中删除资产并写入：
From:从：
<link rel="stylesheet" type="text/css" href="{{ asset('css/default_template.css') }}">
To:到：<link rel="stylesheet" type="text/css" href="css/default_template.css">
And after that, it worked for me.
在那之后，它对我有用。
Hopefully i've helped somebody. Thank you !
希望我帮助了某人。谢谢 ！
