问将pdf (从window.print)保存到js
EN

Stack Overflow用户

提问于 2019-02-11 17:56:07

回答 3查看 2.5K关注 0票数 0

我们可以使用window.print()在本地生成并保存为pdf格式的页面，但我想知道是否可以在变量中将页面保存为pdf格式，就像window.print()生成pdf格式一样，因为我想之后通过ajax发送它。谢谢。

javascript

pdf

在线客服搭建方案

搭建集AI机器人、在线客服、智能外呼等多功能服务的客服系统，支持快速接入及自搭建客服系统，从而让顾客快速得到解答

回答 3

Stack Overflow用户

发布于 2019-02-15 16:41:15

你知道你可以用window.print()将网页保存为pdf，所以你想在javascript中捕捉window.print()的输出。但那不是你的目标，对吧？您的最终目标是将Html页面保存为pdf并通过ajax发送。所以你需要问，除了使用window.print()之外，还有其他方法可以将我的网页保存为pdf吗？现在你走上了正确的道路。要将Html转换为pdf，您可以使用jsPDF的.html() PlugIn和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="~/lib/html2canvas/html2canvas.min.js"></script></script>
<!-- html2canvas 1.0.0-alpha.11 up to v1.0.0-rc.1 works, current version may not work -->
<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>

票数 1

Stack Overflow用户

发布于 2019-02-11 18:34:52

我能理解你的确切需求，这可能会对你有所帮助。

HTML

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

Javascript

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
   }
}

不知道这是否跨浏览器，但它不需要任何js插件。更详细地解释你将如何使用它可以提高答案。如果您想通过ajax上传文件，您可以使用其他方法。

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

HTML：

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

JAVA-SCRIPT:需要jquery

//form Submit
   $("form").submit(function(evt){   
      evt.preventDefault();
      $("#upload").html("<img src='http://crabsheet.com/cs/wp-content/uploads/2012/08/capture-1.gif'>");
      var formData = new FormData($(this)[0]);
   $.ajax({
       url: 'upload.php',
       type: 'POST',
       data: formData,
       async: true,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         $("#upload").html(response);
       }
   });
   return false;
 });

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

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["opepdf"]["name"]);

$fileName = $_FILES['opepdf']['name'];
$fileType = $_FILES['opepdf']['type'];
$fileError = $_FILES['opepdf']['error'];
$fileContent = file_get_contents($_FILES['opepdf']['tmp_name']);

if($fileError == UPLOAD_ERR_OK){
   //Processes your file here
    if (move_uploaded_file($_FILES["opepdf"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["opepdf"]["name"]). " has been uploaded.";
    } else {
        echo "Error uploading your file.";
    }
}else{
   switch($fileError){
     case UPLOAD_ERR_INI_SIZE:   
          $message = 'MAX UPLOAD SIZE Reached';
          break;
     case UPLOAD_ERR_FORM_SIZE:  
          $message = 'MAX FORM Upload Size Reached';
          break;
     case UPLOAD_ERR_PARTIAL:    
          $message = 'Could not finish Upload';
          break;
     case UPLOAD_ERR_NO_FILE:    
          $message = 'NO upload File';
          break;
     case UPLOAD_ERR_NO_TMP_DIR: 
          $message = 'Servernot configured for file upload';
          break;
     case UPLOAD_ERR_CANT_WRITE: 
          $message= 'CANT WRITE';
          break;
     case  UPLOAD_ERR_EXTENSION: 
          $message = 'Could not finish Upload.';
          break;
     default: $message = 'Could not finish Upload';
              break;
    }
      echo json_encode(array(
               'error' => true,
               'message' => $message
            ));
}
?>