jsPDF无法使用任何样式

丁灿

2023-03-14

问题内容：

我是使用jsPDF的新手，但是为了我的生命，我无法获得任何CSS来应用此东西！我尝试了内联，内部和外部都无济于事！我在另一篇SO文章中读到，因为从技术上讲是将内容打印到文件中，所以我需要打印样式表，但这也不起作用。

我有一个非常基本的页面，我只想尝试使用任何CSS：JS：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script> 
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>               
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script>
    $(document).ready(function(){
        $('#dl').click(function(){
        var specialElementHandlers = {
            '#editor': function(element, renderer){
                return true;
            }
        };
        var doc = new jsPDF('landscape');
        doc.fromHTML($('body').get(0), 15, 15, {'width': 170,   'elementHandlers': specialElementHandlers});
        doc.output('save');
        });
    });
</script>

HTML：

<body>
    <div id="dl">Download Maybe?</div>
    <div id="testcase">
        <h1>  
            We support special element handlers. Register them with jQuery-style 
        </h1>
    </div>
</body>

最后是外部样式表：

h1{
    color: red;
}
div{
    color: red;
}

我确定所有内容都正确包含在内，并且没有错误，已经检查了所有内容。是否需要调用一些其他功能才能使CSS正常工作？请让我知道！非常感谢！您可能还有其他提示！

编辑：这是确切的网页：

<html>
    <head>
        <link rel="stylesheet" href="print.css" type="text/css" media="print"/>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="jspdf.js"></script>
        <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
        <script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script>
        <script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>               
        <script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
        <script>
            $(document).ready(function(){
                $('#dl').click(function(){
                var specialElementHandlers = {
                    '#editor': function(element, renderer){
                        return true;
                    }
                };
                var doc = new jsPDF('landscape');
                doc.fromHTML($('body').get(0), 15, 15, {'width': 170,   'elementHandlers': specialElementHandlers});
                doc.output('save');
                });
            });
        </script>
    </head>
    <body>
        <div id="dl">Download Maybe?</div>
        <div id="testcase">
            <h1>  
                We support special element handlers. Register them with jQuery-style 
            </h1>
        </div>
    </body>
</html>

问题答案：

~~我认为问题是您使用 media="print"而不是 media="screen"。尝试制作两个单独的文件，一个用于打印，一个用于屏幕：~~

<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>

屏幕一将包含在浏览器中看到的页面样式。打印页面时将包含样式，或者在这种情况下将其另存为PDF。

编辑

我检查了jsPDF网站，但我认为它们不支持CSS。您可以执行以下操作来创建具有不同文本颜色的文档：

doc.setFontSize(22);
doc.setTextColor(255, 0, 0);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.setTextColor(0, 255, 0);
doc.text(20, 30, 'This is some normal sized text underneath.');

将此代码直接放在var doc = new jsPDF('landscape');脚本中。

jsPDF无法使用任何样式

相关阅读

相关文章

相关问答

相关工具

相关文档