如何在服务器上保存带有图像的 jsPDF？答案

【问题标题】：How could I save a jsPDF with images on server?如何在服务器上保存带有图像的 jsPDF？
【发布时间】：2015-05-28 12:09:48
【问题描述】：

我正在使用 jsPDF 在客户端创建 PDF。现在，我的 PDF 中有图片，我想把它保存在我的服务器上。

问题是，没有图片就没有问题，但有了图片，生成的 PDF 就会损坏。

我该如何解决这个问题？

Javascript：

var pdf = doc.output(); 
var data = new FormData();
data.append("data" , pdf);
var xhr = new XMLHttpRequest();
xhr.open( 'post', 'ajax/upload.php', true );
xhr.send(data);

PHP：

if(!empty($_POST['data'])){
 $data = $_POST['data'];
 $fname = "einsatz.pdf"; // name the file
 $file = fopen("../data/" .$fname, 'w'); // open the file path
 fwrite($file, $data); //save data
 fclose($file);
 echo "Einsatzblatt saved";
}
else {
 echo "No Data Sent";
}

感谢您的帮助！

更新 2015 年 5 月 29 日

该图像是从带有 blockspring 插件的谷歌地图生成的。在那里我得到了一个 base64 png。

blockspring.runParsed("b21fb2a7b862354a76a7806ae9fc0a4d", { "color": "#d52c11", "zoom_level": 16, "address": ""+ adresse + "" }, { "api_key": "br_3080_5cec24d3c19bdc66c763138a974e14311facf637" }, function(res){
var imgData = 'data:image/png;base64,' + res.params.maps.data;

然后我创建 PDF

var doc = new jsPDF('landscape');
doc.addImage(imgData, 'png', 150, 45, 125, 125);

【问题讨论】：

jsPDF not working with images 的可能重复项
可能，但如果不查看 PDF 是如何生成的以及它是如何“损坏”的，我们就无法真正判断出来
不，不一样！它适用于客户端的图像（doc.save（'example.pdf'）），但如果我想将其发送到服务器以将 PDF 直接保存在服务器上，那么 PDF 是否已损坏。如果没有图像的 PDF 则可以在服务器端保存！

标签： javascript php pdf base64 jspdf

【解决方案1】：

我在 java 脚本中编码为base64，然后在服务器中将其解码，它对我有用。

这是我的代码 sn-p。

Javascript：

data: {pdfContent:btoa(pdfContent)}

PHP：

$pdfContent = base64_decode($this->request->data['pdfContent']);

【讨论】：

【解决方案2】：

看来您应该等到所有图像都下载完毕。另一个生成 PDF 的 JS 脚本遇到了类似的问题，解决方案是在 HTML 中添加具有相同图像的 img 标签，因此工作流程将如下所示：

用户加载页面
图片被加载到隐藏的div中：

<!-- hidden images for pdf generation - BEGIN -->
<div id="pdfreportimages" style="display: none;">
    <!-- put images you plan to use in PDF below -->

    <img src="pdfreportimages/logo.jpg" id="pdflogoimage"> 

</div>
<!-- hidden images for pdf generation - END -->

然后执行放置在“pdfreportimages”div下方的javascript并生成PDF

【讨论】：

【解决方案3】：

我有同样的问题，我认为问题是由于帖子期间的字符串编码。

如果你使用 ajax 脚本来传递数据（像这样）

            $.ajax({
                url: 'upload.php',
                type: 'POST',
                data: {
                    'data_pdf': pdf
                },
            })

无论如何，您都可以保存 pdf 文件，但没有图像（图像）的痕迹，我认为问题是由于 POST 期间的编码造成的。

我希望有人可以帮助我们..

【讨论】：

这不是解决问题的答案。
我知道，但这是一个步骤。如果我们能理解如何避免传递给 php 脚本的字符串的编码。