时间戳

首页 > 解决方案 > 为什么服务器上的“窗口”编码问题上的“atob”而不是本地的（laravel 代客）？

javascript - 为什么服务器上的“窗口”编码问题上的“atob”而不是本地的（laravel 代客）？

问题描述

我正在使用 jquery 从所有带有 .my-images 类的 img-tags 中选择所有图像 url

然后我试图将它们放入带有 jsPDF 的 pdf 包文件中。像这样：

//Creating the PDF
var doc = new jsPDF()

//Getting all the images
var images = $('.my-images').map(function(){
    return this.src;
}).get();

//Looping through the images and adding a page for each
var iterations = 1;
images.forEach(function(element) {
    if(iterations > 1){
        doc.addPage();
    }
    console.log(element);
    doc.addImage(element, 'image/png', 10, 10, 190, 277);
    iterations = ++iterations;
});

doc.save('a4.pdf')

所以现在我的问题。在我使用 laravel-valet 的本地，一切正常！甚至真的很好。

但是当我将它推送到服务器时，我得到：

未捕获的 DOMException：无法在 'Window' 上执行 'atob'：要解码的字符串未正确编码。

我已经阅读了一些内容并尝试了atob 和 btoa但它立即在本地中断......我没有发现关于这种奇怪行为的其他报告。关于如何进行的任何想法？

标签： javascriptjspdf

解决方案

几个小时后......我真的不知道问题是什么......但我知道答案。您需要实例化 Image 类，而不是直接从 DOM 选择中添加 URL。像这样：

//Creating the PDF
var doc = new jsPDF()

//Getting all the images
var images = $('.my-images').map(function(){
    return this.src;
}).get();

//Looping through the images and adding a page for each
var iterations = 1;
images.forEach(function(element) {
    if(iterations > 1){
        doc.addPage();
    }

    var img = new Image();
    //Then just add the url as a attribute
    img.src = element;

    //THEN add the image to the pdf
    doc.addImage(img, 'image/png', 10, 10, 190, 277);

    iterations = ++iterations;
});

doc.save('a4.pdf')

BOOM，你得到了它。我想当您将 jsPDF 添加到 Image 类时，会发生一些 jsPDF 喜欢的编码。

推荐阅读