WKHTMLTOPDF从左边距剪切文本

我目前正在使用WKHTMLTOPDF通过我的Laravel应用程序生成PDF。PDF模板使用

引导程序3.3.6

我现在看到的是，文本、字体、布局呈现得非常完美，但是文本从左边距被切掉了

如果我删除对引导CSS的调用，它不会切断文本，而是表格等。。未正确对齐/布局。一定是引导程序中的某些东西导致了这个问题

模板顶部

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<style>
body {
  width: auto !important; min-width: 100% !important;
  font-family: 'Lato';
}
.page-break {
  page-break-after: always;
}
</style>

---

以前有人经历过吗？如果是，你是如何解决的？如果您需要更多的代码样本，请让我知道。非常感谢。

我以前在FrappéFramweork和ERPNext上都有过这样的经历。DocType（销售发票）的HTML呈现将出于神秘的原因执行此操作。到目前为止，我找到了两个解决办法： 1.根据最终文档大小在HTML代码中设置视口大小。例如，8.5 x 11字母大小的页面应为：

<style>
@media screen {
    .print-format {
        width: 21.59cm;
        min-height: 27.94cm;
        padding: 0.0cm;
    }
}
</style>

@媒体屏幕{
.打印格式{
宽度：21.59厘米；
最小高度：27.94cm；
填充：0.0cm；
}
}

我想你也可以用英寸或其他公认的尺寸。必须通过执行上述解决方案在HTML或Jinja模板上声明足够的视口大小

如果所有其他方法都失败了，我可以使用以下样式和HTML解决我的问题：

<style>
    div.general{
        position: relative;
        top: 0.0cm; 
        /*left: 0.0cm; */
    }
    div.document_size{
        position: absolute;
        width: 21.59cm;
        height: 27.94cm; 
    }
</style>
<div class="general">
    <div class="document_size">
        <!-- YOUR HTML GOES HERE -->
    </div>
</div>

总务司{
位置：相对位置；
顶部：0.0cm；
/*左：0.0cm*/
}
分区文件大小{
位置：绝对位置；
宽度：21.59厘米；
身高：27.94厘米；
}

最后，要小心地在页面上定位元素，请使用带有声明类样式的

span

标记，这样您就可以将其绝对放置在上面创建的div中。从文档的左上角（原点）测量距离：

第1项{ 位置：绝对位置； 顶部：1厘米； 左：1厘米； }

将span class=“item1”放置在上述div标记中后，您可以在其中放置任何需要的内容。我认为这些跨度标签是一种坐标系标记，它确保每一代WKHTMLTOPDF的一致输出。

<style>
    div.general{
        position: relative;
        top: 0.0cm; 
        /*left: 0.0cm; */
    }
    div.document_size{
        position: absolute;
        width: 21.59cm;
        height: 27.94cm; 
    }
</style>
<div class="general">
    <div class="document_size">
        <!-- YOUR HTML GOES HERE -->
    </div>
</div>