生成的 pdf 中的图像损坏了发送到服务器的 pdf

2024-04-22

我正在使用 jsPDF 在 Web 应用程序中创建 PDF 文档,将该文档发送到 Perl,并让 Perl 通过电子邮件发送它,效果很好。但是,当我将图像添加到 PDF 文档时,它不再起作用,因为 Adob​​e Reader 说该文件已损坏。该应用程序很大,因此这里有一个存根,其中包含类似的相关代码,其作用方式相同:

html:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://<myserver>/js/jquery.js"></script>
        <script src="https://<myserver>/js/jspdf.js"></script>
        <script src="https://<myserver>/js/jspdf.plugin.addimage.js"></script>      
        <script src="https://<myserver>/test/pdf.js"></script>
    </head>
    <body>
        <input type="submit" id="go">
    </body>
</html>

js:

$(document).ready(function() {
    $('#go').on('click',function() {
        //create PDF
        var imgData = 'data:image/jpeg;base64,<dataurlencoded image string>';
        var doc = new jsPDF('p','pt','a4');
        doc.addImage(imgData, 'JPEG', 22, 22, 138, 28);     
        doc.text(30, 120, 'Lorem Ipsum!');
        var perl_pdf = doc.output();

        //send PDF to perl and have perl email it
        $.ajax({
            type: "POST",
            url: "https://<myserver>/cgi-bin/pdf.pl", 
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            dataType: "json",
            data: "perl_pdf="+encodeURIComponent(perl_pdf),
            error: function(XMLHttpRequest, textStatus, errorThrown) { 
                alert("error:  "+ XMLHttpRequest.responseText + ", textStatus: " + textStatus + ", errorThrown: " + errorThrown);
            }, 
            success: function(data){
                alert("Success: "+data.success);
            } 
       });
    });     
});

perl:

#!d:/perl/bin/perl.exe -w
use strict;
use warnings;
use CGI qw(:all);
use MIME::Lite;
use MIME::Base64;

my $q = CGI->new();
my $pdf_doc = $q->param('perl_pdf');

open (OUTFILE, '>pdf.pdf') or die "Could not open file";
binmode(OUTFILE);
print OUTFILE decode_base64($pdf_doc);
close OUTFILE;

my $from_address = '<from_address>';
my $to_address = '<to_address>';
my $mail_host = '<smtp_server>';

my $subject = 'PDF Test';
my $message_body = "The PDF is attached...\n\n";

my $my_file = 'pdf.pdf';
my $out_file = 'test.pdf';

my $msg = MIME::Lite->new (
    From => $from_address,
    To => $to_address,
    Subject => $subject,
    Type => 'multipart/mixed') or die "Cannot create multipart container:  $!\n";

$msg->attach (
    Type => 'TEXT',
    Data => $message_body) or die "Cannot attach text: $!\n";

$msg->attach (
    Type => 'application/pdf',
    Path => $my_file,
    Filename => $out_file,
    Disposition => 'attachment') or die "Cannot attach file: $!\n";

MIME::Lite->send('smtp', $mail_host, Timeout=>60);
$msg->send;

my $json = qq{{"success" : "This worked"}};
print $q->header(-type => "application/json", -charset => "utf-8");
print $json;

如果我将 Ajax 调用和输出创建替换为...

doc.output('dataurlnewwindow',{});    

...然后它会正确显示在新的浏览器选项卡中,因此我知道图像已正确插入。从我在搜索中发现的情况来看,这似乎是一些编码问题,但我尚未找到该问题的解决方案。如何将带有图像的 PDF 文档成功发送到服务器上的 Perl,使其不被损坏?


此问题在最新版本的 JSPDF 中已得到解决。 如果您使用以下方式将带有图像的 PDF 作为表单数据发送到服务器xmlhttprequest.send或作为 ajax 调用的一部分。

请用jsPDF.output('blob')代替jsPDF.output().

这不会在发送到服务器时损坏 pdf。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

生成的 pdf 中的图像损坏了发送到服务器的 pdf 的相关文章

  • 为具有可变内容的内联块元素提供相同的高度?

    我有 4 个宽度固定但内容可变的内联块元素 并且我希望所有这些元素具有相同的高度 最大元素的高度 请参见这个jsfiddle http jsfiddle net kKZXj 我应该如何实现这个目标 如果仅使用 css 无法做到这一点 那么使
  • 从字符串中删除货币符号并使用 Javascript 中的单行转换为数字

    我下面有一个字符串 它是以英镑为单位的价格 我想删除货币符号 然后将其转换为我可以用来与另一个值进行比较的数字 价格 例如 X gt Y 14 50 我之前已将字符串转换为用于货币的数字 var priceNum parseFloat pr
  • JavaScript 中的 Promise.all:如何获取所有 Promise 的解析值?

    我编写了以下node js文件 var csv require csv parser var fs require fs var Promise require bluebird var filename devices csv var d
  • JavaScript 中的常用数字

    在我的任务中 我必须编写一个程序来查找数组中最常见的数字以及它重复的次数 我写了一些东西 但只打印最大重复次数 所以我的问题是如何打印这个元素的值 最大数量 在我的例子中是 4 var array 13 4 1 1 4 2 3 4 4 1
  • 是否可以用 json 进行表达式/计算?

    我使用出色的 json server 作为应用程序的后端 它对于访问自定义端点以检索一些数据非常有用 但是如果它允许我进行计算 表达式以便我也可以模仿后端行为 那将会非常有用 以这个数据结构为例 products name football
  • GeoJSON 要素坐标未显示在 OpenLayers 地图上

    我正在尝试显示一个GeoJSON地图上的多边形 我使用了 OpenLayers 提供的示例以及以下数据 但仅显示第二个多边形 var geojsonObject type FeatureCollection crs type name fe
  • Angular 2 最终版本路由器单元测试

    如何使用 karma 和 jasmine 对 Angular 2 0 0 版中的路由器进行单元测试 这是我的旧单元测试在版本 2 0 0 beta 14 中的样子 import it inject injectAsync beforeEac
  • 如何最好地实现多个重叠元素的翻转和推出事件?

    Problem 我正在开发一个网站 其中有一个 拨号盘 显示代表伞式公司不同部门的多个选项卡 目前我已经用 HTML CSS 准备好了一切 每个选项卡的定位 内圈处于较高位置z index因为选项卡在滚动时需要向外动画 我可以实现这部分 选
  • 获取键盘事件中的鼠标位置

    我试图在用户按住 Shift 键时出现选择轮 滚轮应以鼠标位置为中心 然而当我测试这个时 pageX and clientX两者在事件对象上都未定义 是否可以通过键盘事件获取鼠标坐标 不 只需跟踪mousemove事件并持续保存当前位置 以
  • 日期时间的自定义 JavaScriptConverter?

    我有一个对象 它有一个 DateTime 属性 我想通过 AJAX JSON 将该对象从 ashx 处理程序传递回网页 我不想使用第 3 方控件 当我这样做时 new JavaScriptSerializer Serialize DateT
  • HTML if 语句在 CDN 失败时加载本地 JS/CSS

    当从 CDN 或任何外部服务器加载 CSS JS 文件时 有可能 即使概率很低 由于外部故障而丢失该文件 在这种情况下 html 页面将因缺乏适当的 CSS 和 JS 而被损坏 有没有一种实用的方法可以在 CDN 故障时加载本地版本 IF
  • Rails - 使链接与 ajax 一起工作

    我有一个链接 应该使用 ajax 加载它旁边的部分内容 而无需重新加载页面 链接在这里 这是链接应该转到的控制器 class ProfilesController lt ApplicationController def profile f
  • ERR_IMPORT_ASSERTION_TYPE_MISSING 用于导入 json 文件

    这段代码运行良好 我不知道是因为我升级到 Node 17 还是什么原因 但现在我明白了 TypeError ERR IMPORT ASSERTION TYPE MISSING Module file Users xxxxx code pro
  • 将 javascript 变量发送到服务器端 ASP .NET

    我需要在回发时将 JavaScript 数据传递到服务器端 Exvar jsVariableToPass new Object jsVariableToPass key1 value1 jsVariableToPass key2 value
  • 如何检查摘要周期是否稳定(又名“Angular 完成编译了吗?”)

    tl dr 最初的问题是 如何在每个摘要周期触发回调 但潜在的问题更有趣 因为这回答了两个问题 所以我继续修改了标题 Context 在解决了所有依赖项 nginclude API 调用等之后 我试图控制 Angular 何时完成 HTML
  • JS中如何过滤多个字符串? [复制]

    这个问题在这里已经有答案了 我希望能够过滤数组中的多个字符串 类型 例如我想过滤类型meat并输入fruit在下面的数据结构中 我想要实现的是过滤数据对象 const data type meat food hamburger type f
  • JavaScript 右移负数

    这是片段 var i 101 console log 101 i toString 2 console log 101 gt gt 1 i gt gt 1 toString 2 var l 101 console log 101 l toS
  • 使用 Promise 语法编写同步代码有什么好处吗?

    有同步承诺这样的概念吗 使用 Promise 语法编写同步代码有什么好处吗 try foo bar a b bam catch e handleError e 可以写成类似的东西 但使用同步版本then foo then bar bind
  • addEventListener keydown 不起作用

    我在互联网上找到了一些基本的 Pong 代码 并尝试添加按键 代码在这里 http cssdeck com labs ping pong game tutorial with html5 canvas and sounds http css
  • 将元素添加到 D3 圆包节点

    我正在尝试制作一个可缩放的圆形包装图 我希望每个子圆圈包含一个较小的图表 该图表始终具有相同的结构 即 4 列 只有条形的高度会改变 我尝试添加一个简单的rect到目前为止我的图表 但矩形没有添加到圆圈中并且是静态的 JS var marg

随机推荐