使用 wkhtmltopdf 进行 PDF 转换后更改的值未显示

Question

目前在我的 html 页面中我更改了一些值，它的工作方式是这样的：

函数：

function change1(){
   var myNewTitle = document.getElementById('myTextField1').value;
   if( myNewTitle.length==0 ){
       alert('Write Some real Text please.');
   return;
   }
   var titles = document.getElementsByClassName('title1');
   Array.prototype.forEach.call(titles,title => {
    title.innerHTML = myNewTitle;
   });
}

更改的值和用于输入的文本字段：

      Voornaam: <h3 class="title1">Kevin</h3>
      <input type="text" id="myTextField1"/>
      <input type="submit" id="byBtn" value="Change" onclick="change1()"/><br/>

      <p class="title1">Test.</p>

我使用 wkhtmltopdf 进行转换，这是一个用于 html 到 PDF 转换的命令行工具。然而，我所做的更改当然不是在服务器上而是在本地完成的，这就是为什么我的更改没有显示在我的转换中。

我想先下载修改后的html页面，然后用wkhtmltopdf转换。有人能给我一个例子说明如何做到这一点，或者给我一些更好的方法吗？

Answer 1

您必须发送页面内容，服务器上的 wkhtmltopdf 将完成这项工作。

在客户端你需要一个像这样的函数：

function send(){ 
  var f = document.createElement("form"),
     i = document.createElement("input"); //input element, hidden

  f.setAttribute('method',"post");
  f.setAttribute('action',"http://yourserver.com/script.php");

  i.setAttribute('type',"hidden");
  i.setAttribute('name',"content");
  i.setAttribute('value', document.body.innerHTML); // or the container you need

  f.appendChild(i);
  document.getElementsByTagName('body')[0].appendChild(f);
  f.submit();
};

在服务器端，例如php，你会得到内容，保存在临时文件中，然后调用工具将其转换为pdf，然后return将pdf转换为客户：

<?php
try {
   $content = $_REQUEST['content'];
    if(!file_exists('/tmp') ){
       mkdir('/tmp', 0777);
    }
   $fp = fopen('w+','/tmp/tmp.html');
   if($fp){
     fwrite($fp, $content);
     fclose($fp);

     $filename = '/tmp/out_' . time() .'.pdf'; // output filename
     shell_exec('wkhtmltopdf /tmp/tmp.html ' . $filename);

     //then eventually ask user for download the result
     header("Content-type:application/pdf");

     // It will be called output.pdf
     header("Content-Disposition:attachment;filename='output.pdf'");

    readfile($filename);
  }else{
     echo 'html file could not be created';
  }
} catch (Exception $e) {
  echo 'exception: ',  $e->getMessage(), "\n";
}

使用 wkhtmltopdf 进行 PDF 转换后更改的值未显示

changed values not showing after PDF conversion with wkhtmltopdf

html

javascript

php

pdf

wkhtmltopdf