Question

我们可以使用window.print()将页面另存为pdf，但是我想知道是否可以将页面另存为pdf的变量，就像window.print()生成pdf一样，因为我想要通过ajax发送之后。谢谢。

Answer 1

您知道您可以使用window.print()将网页另存为pdf，因此您希望在JavaScript中将window.print（）的输出捕获为var。但这不是你的目标，对不对？您的目标是将html页面另存为pdf并通过ajax发送。因此，您需要问，除了使用window.print()之外，还有其他方法可以将html页面另存为pdf吗？现在您处在正确的轨道上。要将html转换为pdf，可以使用jsPDF的.html()插件和html2canvas 1.0.0-alpha.12。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->
<script>
    function emailHtml() {
        let pdf = new jsPDF('p', 'pt', 'a4');
        pdf.html(document.body, {
            callback: function () {
                let obj = {};
                obj.pdfContent = pdf.output('datauristring');
                var jsonData = JSON.stringify(obj);
                $.ajax({
                    url: '/api/yourapi',
                    type: 'POST',
                    contentType: 'application/json',
                    data: jsonData
                });
            }
        });
    }
</script>

Answer 2

您无法从window.print（）获取值。

Answer 3

据我了解，您的确切需求可能对您有所帮助。

HTML

SizedBox

JavaScript

ClipRRect

不知道是否使用此跨浏览器，但不需要任何js插件。有关如何使用此功能的详细说明可以改善答案。如果要通过ajax上传文件，则可以使用其他方式。

编辑：如果要通过ajax将PDF发送到服务器，请使用：

HTML：

<button onclick="document.getElementById('opepdf').click();">Read PDF</button>
<input id="opepdf" type="file" name="name" style="display: none;" onchange="PDFReader(event);"/>

JAVA-SCRIPT：需要jquery

function PDFReader(e){
   var file = e.target.files[0]; 

   var pdfReader = new FileReader();// Create a File Reader
   pdfReader.readAsText(file,'UTF-8');

   pdfReader.onload = readerEvent => {
      var PDFContent = readerEvent.target.result;
      console.log( PDFContent );//PDF content in variable
   }
}

PHP-Serverside：应该有一个相对于脚本目录的“上载”文件夹

<form>
Select PDF
<input id="opepdf" name="opepdf" type="file" /><br>
<div id="upload"></div><br>
<input type="submit" value="submit"/> 
</form>

将pdf（来自window.print）保存到js var

3 个答案: