如何在jspdf中创建多行文本和页面拆分?

时间:2017-08-20 09:42:00

标签: javascript html jspdf

我正在尝试使用jspdf将文本区域输入集合的文本内容输出为pdf文件。我无法解决如何放入换行符或使用pagesplit:true选项,因为它不会将其作为doc.text中的参数。我在25天前看到了一个类似的问题,但我不明白如何实现答案,并且不确定它是否适用于多个文本区域。我非常感谢任何建议。

<html>
<title>Multi-line/pagesplit</title>
<body>
<form action="#" method="post" id="myForm">
    <table id="myTable">
        <tr>
            <td>Please enter text</td>
        </tr>
        <tr>
            <td><textarea rows="4" cols="50" id="myText" wrap="soft" placeholder="Your text..."></textarea></td>
        </tr>
    </table>
</form>
<input type="button" value="Download as PDF" onclick="downloadPDF()"/></button>
<script>
function downloadPDF(){
    var text = document.getElementById("myText").value;
    var doc = new jsPDF();
    doc.setFontSize(12);
    doc.text(20, 20, text);
    doc.save('Test.pdf');
    ;
}
</script>
<script src="jspdf.min.js"></script>
</body>
</html>

编辑:我在这里找到了一个非常有用的答案:Word wrap in generated PDF (using jsPDF)?并设法根据我的需要略微调整它。似乎必要的插件已经在jspdf.min.js中了。以下是我最终使用的代码:

<!DOCTYPE html>
<html>
<title>Multi-line/pagesplit</title>
<body>
<form action="#" method="post" id="myForm">
    <table id="myTable">
        <tr>
            <td>Please enter text</td>
        </tr>
        <tr>
            <td><textarea rows="4" cols="50" id="myText" wrap="soft" placeholder="Your text..."></textarea></td>
        </tr>
    </table>
</form>
<input type="button" value="Download as PDF" onclick="downloadPDF()"/>.     </button>
<script>
function downloadPDF(){
    var text = document.getElementById("myText").value;
    var doc = new jsPDF();
    var splitText = doc.splitTextToSize(text, 250);
    var pageHeight = doc.internal.pageSize.height;
    doc.setFontSize(11);
    var y = 20;
    for (var i=0; i<splitText.length; i++){
        if (y > 275){
            y = 20;
            doc.addPage();
        }
        doc.text(20, y, splitText[i]);
        y = y + 5;
    }
    doc.save('Test.pdf');
    ;
}
</script>
<script src="jspdf.min.js"></script>
</body>
</html>

0 个答案:

没有答案