javascript - 从字符串形式的字节下载 PDF

Question

我从 API 响应中获取字符串形式的字节:

$scope.image = 
"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"

现在我想将其转换回图像，然后将其下载为 PDF。

以下内容不起作用:

window.open('data:application/pdf;base64,' + $scope.image);

我也尝试过使用 pdfMake，但这也不起作用:

 var dlnk = document.getElementById('dwnldLnk');
    html2canvas(document.getElementById('dwnldLnk'), {
                        onrendered: function (canvas) {
                            var data = canvas.toDataURL();
                            var docDefinition = {
                                content: [{
                                    image: data,
                                    width: 500
                                }]
                            };
                            pdfMake.createPdf(docDefinition).download("Roster.pdf");
                        }
                    });

HTML 客户端的 div 为:

<div id="dwnldLnk" style="display:none;">
     {{image}}
    </div>

在服务器端，这是存储字节的代码:

        String html = "<h1>Hello, world.</h1>";

        JLabel label = new JLabel(html);
        label.setSize(200, 120);

        BufferedImage image = new BufferedImage(
                label.getWidth(), label.getHeight(), 
                BufferedImage.TYPE_INT_ARGB);

        {
            // paint the html to an image
            Graphics g = image.getGraphics();
            g.setColor(Color.BLACK);
            label.paint(g);
            g.dispose();
        }

        // get the byte array of the image (as jpeg)
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        try {
            ImageIO.write(image, "jpg", baos);          
        } catch (IOException e) {           
            e.printStackTrace();
        }
        // these bytes are stored in bytea column in postgres database
        byte[] bytes = baos.toByteArray();

Answer 1

尽管您的图像在 pdf 中未正确显示，但我检查了其他图像的 base64 字符串，它们运行良好。所以你还需要检查如何将图像转换为base64字符串。对我有用的是:

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
</head>
<body>
   <button id="download">download</button>

<script>
    var image = new Image();
    image.src = 'data:image/jpeg;base64,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';
    document.body.appendChild(image);

    download.addEventListener("click", function() {
        var pdf = new jsPDF();
        pdf.addImage(image, 'JPG', 0, 0);
        pdf.save("download.pdf");
    }, false);
</script>

</body>
</html>