使用 ajax 和 mpdf 将 html 转换为 pdf

Posted

技术标签:

【中文标题】使用 ajax 和 mpdf 将 html 转换为 pdf【英文标题】:Convert html to pdf with ajax and mpdf 【发布时间】:2018-12-05 05:14:39 【问题描述】:

我有存储在数据库中的 html 列表,我想检索数据并将其转换为 pdf 并在转换后通过 ajax 请求下载。

我试过了,但是当 pdf 下载时,下载的文件是空的。 请问我需要做什么? 谢谢。

JS 代码

SMSLiTe('click','.export-to-pdf',function(event)
  event.preventDefault();
  ///export note to pdf via ajax
  if (typeof notes[0].note.nid !== typeof undefined && notes.length) 
  var nid = notes[0].note.nid;
  var fd = new FormData();
  fd.append('export_to_pdf',true);
  fd.append('note_id',nid);
  request.open(bigPipe.formMethod.a, 'pdf/pdf');
  request.send(fd);
  request.onload = function(e)
    if (request.readyState == request.DONE && request.status ==200) 
        //code here ....download
        var data = request.responseText,
        blob = new Blob([data]),
        a = document.createElement('a'), d = new Date();
        a.href = window.URL.createObjectURL(blob);
        a.download = d.getTime()+'.pdf'; a.click();

    
  
  else
  sustainScroll(bigPipe.c_w,bigPipe.class.fixed);
  var msg = 'Sorry! something gone wrong, please refresh this page and try again.',title = 'Export Failed';
  $(bigPipe.document).append(flexibleDialog(content:templateHTML.flexDialog(msg,title,'_2d0',null,'Close',null,0),isClass:'export_to_pdf_failed _2d0',heigt:140,width:600));jkg();  
  
);

php 代码

if (isset($_POST['note_id'],$_POST['export_to_pdf'])) 
$nid = (int)$_POST['note_id'];
$sql = "SELECT content  FROM $notes_table WHERE note_id='$nid' LIMIT 1";
$query = mysqli_query($conn,$sql);
if (mysqli_num_rows($query)) 
$row = mysqli_fetch_assoc($query);
$content = $row['content'];
//create PDF file
$mpdf = new mPDF();
$mpdf->WriteHTML($content);
$mpdf->Output(time().'.pdf','D');exit;


【问题讨论】:

你应该返回pdf的路径,它是由mpdf创建的。 我没有将文件存储到服务器。 我将mpdf创建的pdf附加到bworser 【参考方案1】:

检查从 MPDF 返回的响应数据,我意识到输出数据是一个 blob,因为数据已经是 blob 数据。我知道将 XMLHttpRequest.responseType 的 responseType 更改为 blob

它现在有效。

修改过的JS:

SMSLiTe('click','.export-to-pdf',function(event)
event.preventDefault();

//set request method
if (window.XMLHttpRequest) 
// code for IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
 else   // code for IE6, IE5
var request = new ActiveXObject("Microsoft.XMLHTTP");



  ///export note to pdf via ajax
  if (typeof notes[0].note.nid !== typeof undefined && notes.length) 
  var nid = notes[0].note.nid;
  var fd = new FormData();
  fd.append('export_to_pdf',true);
  fd.append('note_id',nid);
  request.open(bigPipe.formMethod.a, 'pdf/pdf');
  request.send(fd);

  request.responseType = 'blob';//change reponseType before onload

  request.onload = function(e)
    if (request.readyState == request.DONE && request.status ==200) 
        //code here ....download
        var data = request.response,
        blob = new Blob([data],type: 'application/pdf'),
        a = document.createElement('a'), d = new Date();
        a.href = window.URL.createObjectURL(blob);
        a.download = d.getTime()+'.pdf'; a.click();
        //console.log(data);
    
  
  else
  sustainScroll(bigPipe.c_w,bigPipe.class.fixed);
  var msg = 'Sorry! something gone wrong, please refresh this page and try again.',title = 'Export Failed';
  $(bigPipe.document).append(flexibleDialog(content:templateHTML.flexDialog(msg,title,'_2d0',null,'Close',null,0),isClass:'export_to_pdf_failed _2d0',heigt:140,width:600));jkg();  
  
);

PHP 代码: 我们必须将 MPDF 输出为字符串,因为我们没有将 MPDF 附加到浏览器;

//create PDF file
$mpdf = new mPDF();
$mpdf->WriteHTML($content);
$output  = $mpdf->Output(time().'.pdf','S');//output as string
echo($output); //final result to JS as blob data

【讨论】:

以上是关于使用 ajax 和 mpdf 将 html 转换为 pdf的主要内容,如果未能解决你的问题,请参考以下文章

在 Codeigniter 中使用外部 CSS 支持将 HTML 转换为 PDF

使用 MPDF 将 HTML 保存为 PDF 和电子邮件

如何使用 php mpdf 库将多个 PDF 文件合并为一个 PDF

php将html转为图片

MPDF未定义索引错误

使用 mpdf 库在 Google Cloud Storage 上上传 PDF 文件