如何从pdf(jspdf)中删除black bg?

时间:2015-09-09 06:34:39

标签: html css pdf jspdf html2canvas

我使用html2canvas和jspdf从html转换为pdf。

我使用的是a3格式的pdf,但内容宽度为ix 1000px。所以在1000px之后,pdf显示黑色背景。

canvas{
    background: #fff !important;
    background-color: #fff !important
    margin: 0;
}
#cisForm {
    padding: 10px;
    width: 1000px;
    margin: 0;
    background: #fff !important;
}

cisForm是正文

<script type="text/javascript">
    window.onload = function() {
            html2canvas(document.body).then(function(canvas) {
                background:'#fff',
                document.getElementById("cisForm").appendChild(canvas);
                document.body.appendChild(canvas);
                var context = canvas.getContext("2d");
                context.fillStyle="#FFFFFF";

                 l = {
                     orientation: 'p',
                     unit: 'pt',
                     format: 'a3',
                     compress: true,
                     fontSize: 8,
                     lineHeight: 1,
                     autoSize: false,
                     printHeaders: true
                 };

                var doc = new jsPDF(l, "", "");
doc.addImage(canvas.toDataURL("image/jpeg"),"jpeg",0,0)
                window.location=doc.output("datauristring")
            });
        }
    </script>

此代码没有用处。这是从html转换为pdf。

还有一个问题。

一些有限的内容仅以pdf格式出现。有些内容没有到来。

我们是否需要在任何地方设置no.of页面?

如何从pdf enter image description here

中删除黑色背景

3 个答案:

答案 0 :(得分:1)

尝试将您的身体背景颜色设置为#FFFFFF。

答案 1 :(得分:0)

这是因为你指定的宽度调整宽度或在html2canvas选项中指定。

答案 2 :(得分:0)

看看这个对我有用 https://github.com/Wildhoney/Canvas-Background#canvas-background

import toDataURL from 'canvas-background';

const canvas = document.querySelector('canvas');
const data = toDataURL(canvas, '#ffffff', {
    type: 'image/jpeg',
    encoderOptions: 1.0
})