烧瓶pdfkit不渲染uikit
我对这篇长篇文章表示歉意.我只是希望我的问题中包含的一些信息可能会对其他人有所帮助。
我一直试图打印一个PDF从一个html页面呈现在瓶。这个PDF包含了我想要包含在PDF中的几个特性，比如Jinja2模板变量、内联css和静态文件、javascript库(比如momentjs和UIKit )，以及一些图像。
我已经成功地将其中的大部分内容组合在一起，但我似乎无法为两个特性找到任何解决方案：UIKit javascript库，一些内联CSS。
这里是生态系统的简化版本:我定义了发送给Jinja2的绝对路径Jinja2，以正确地包含JS静态库(包括momentjs)并呈现html。在为wkhtmltopdf定义了一些选项之后，我准备了一个静态css文件(uikit.min.css和其他文件)数组，用于格式化PDF格式，并将pdf作为对浏览器的响应。
def generatePdf():
## missing text ##
base = os.path.abspath(os.path.dirname(os.path.dirname(__file__)))
document = render_template('to_be_printed.html', base=base, order=res) # order is variable for Jinja2 - not relevant
options = {
'page-size': 'A4',
'enable-local-file-access': None, # to avoid blanks
'javascript-delay': 1000,
'no-stop-slow-scripts': None,
'debug-javascript': None,
'enable-javascript': None
}
css = assets.bundles['home_css'].urls()
css = [base+path for path in css]
pdf = pdfkit.from_string(document, False, options=options, verbose=True, css=css)
response = make_response(pdf)
response.headers['Content-Type'] = 'application/pdf'
return response在该文件的这个版本中，我尝试在to_be_printed.html中呈现所有元素
<html>
<head>
<meta charset="utf-8">
<style media="screen">
html, body {
background: #fff
}
.navigation {
display: flex;
flex-direction: row;
justify-content: space-between;
}
</style>
<title>Reservation N. {{ order }}</title>
</head>
<body>
<div class="navigation uk-flex uk-flex-between uk-flex-bottom" style="display:flex; flex-direction:row">
<div class="">
<h2 class="uk-margin-remove" style="color:red">Hello {{order.from_data.strftime('%d %B %Y at %H:%M') }}</h2>
</div>
<div class="uk-logo">
<a class="uk-logo" href="{{ url_for('index')}}">
<img class="" src="{{ order.logo }}" alt="Database X" style="max-width: 350px; width: 70%">
</a>
<p id="io">doesn't matter</p>
</div>
</div>
{% assets "home_js" %}
<script type="text/javascript" src="{{ base_url+ASSET_URL }}"></script>
{% endassets %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" charset="utf-8"></script>
<script type="text/javascript">
var el = document.getElementById('io')
el.style.color = 'red'
</script>
</body>
</html>- 所有通过
pdfkit.from_string作为css参数发送的CSS文件都被完美地应用了。 - 在标题中，
html, body的样式正在工作，但我不能将div.navigation显示为flex。虽然内联样式<h2 style="color:red">正在运行fine.
，但我正在通过
-
<head>、UIKitclass='uk-flex'和 - 手动尝试
- 所有的
jinja2变量都呈现得很好，但我不得不调用strftime，因为使用moment(order.from_date).format()(在文档末尾加载)内联格式没有工作。页面底部的简单手写脚本 - 运行良好(因此
javascript实际上在模板上运行)。H 249F 250
问题似乎是不同的，但是如果我能够加载和应用UIKit javascript library (虽然不确定flex )，那么一切都会正常工作。对于pdfkit，我尝试了许多不同的选项，但似乎没有任何变化会影响到这种行为：
'javascript-delay': 1000,我甚至把它设为50000...no changes'no-stop-slow-scripts': None,不affect'debug-javascript': None,帮了我很多，但是现在没有error/warning/logs'enable-javascript': None不影响
我还将脚本移到主体之前(在<head>内外)。
你有什么建议吗？
非常感谢
回答 1
Stack Overflow用户
发布于 2021-12-23 08:18:59
问题根本不是UIKit。这种不兼容性是因为wkhtmltopdf使用了解释过的UIKit的旧版本here。
这意味着，为了创建一个-webkit-box-flex元素，您应该使用非标准的uk-flex CSS属性来代替uk-flex类。
https://stackoverflow.com/questions/70268588
复制相似问题
腾讯云开发者
