javascript - 在 Safari 的新标签页中打开 PDF

Question

帮助我，我非常需要帮助。现在进入真正的问题。

我一直在尝试让我的 pdf 在 Safari 的新选项卡中打开，但直到现在我都感到失望。我正在使用 jsPDF 生成我的 PDF，之前我使用它是

doc.save(pdfName+".pdf")

方法相同，因为在最新的 safari 版本“9.1.1(10601.6.17)”中它坏了。我仍然可以使用 jsPDF 的内置选项生成 pdf:

pdf.output('dataurl');

但是，它倾向于在同一个选项卡中打开 PDF，这种行为是非常不可取的。我尝试了网上提供的各种解决方案来解决问题，但都没有用。我尝试过的一些解决方案是:

1. 使用 window.open() 不起作用。
2. 使用 location.href 无效。
3. 使用 doc.output('save', 'filename.pdf'), doc.output('datauri'), doc.output('dataurlnewwindow')，没有任何效果。

4. 还尝试通过创建 anchor 标记并将其目标设置为“_blank”来进行假点击，然后使用 eventDispatcher 来刺激鼠标点击，但它也没有奏效。像这样:

   var a = window.document.createElement("a");
   a.target = '_blank';
   a.href = 'http://www.google.com';
   
   var e = window.document.createEvent("MouseEvents");
   e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
   a.dispatchEvent(e);
   

对我应该做什么有什么建议吗？我希望我的 pdf 在新选项卡中打开，而不是在与我的应用程序相同的选项卡中打开。

P.S:我在上面为 Safari 尝试的每个解决方案在 Chrome 和 Mozilla Firefox 中都可以完美运行，我只是无法弄清楚 Safari 有什么问题。任何帮助将不胜感激。

Answer 1

尝试了 stackoverflow 中提到的许多解决方案，但对我没有任何效果，后来检查了 FileSave.js 实现并为这个问题创建了一个有效的解决方案。

1. 请注意，我已在 iOS Safari 中成功测试了此解决方案。
2. 在函数 downloadPdfMobile 中，if 部分用于 Web safari else 部分用于移动 safari。
3. 普通的 Android chrome 浏览器无法正常工作，您需要遵循传统方式。

首先你需要从jsPDF中获取base64字符串

const doc = new jsPDF.jsPDF({ unit: 'pt', putOnlyUsedFonts: true});
const pdfElement = document.getElementById('id');
var pdfName = 'Test.pdf';
  doc.html(pdfElement, {
    callback: (pdf) => {
      var base = pdf.output('datauristring').split(',')[1];
      downloadPdfMobile(pdfName, base);
    },
    margin: 20,
 });

这就是 downloadPdfMobile 函数的样子，首先你需要转换 base64 t Blob。

downloadPdfMobile: function (FileName, content) {
                    var _global =
                        typeof window === "object" && window.window === window
                            ? window
                            : typeof self === "object" && self.self === self
                            ? self
                            : typeof global === "object" && global.global === global
                            ? global
                            : this;

                var isMacOSWebView =
                    _global.navigator && /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent);

                var blob = this.base64toBlob(content);
            
                var popup = open("", "_blank");
                if (popup) {
                    popup.document.title = popup.document.body.innerText = "downloading...";
                }

                var force = blob.type === "application/octet-stream";
                var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari;
                var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);

                if ((isChromeIOS || (force && isSafari) || isMacOSWebView) && typeof FileReader !== "undefined") {
                    var reader = new FileReader();
                    reader.onloadend = function () {
                        var url = reader.result;
                        url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, "data:attachment/file;");
                        if (popup) popup.location.href = url;
                        else location = url;
                        popup = null;
                    };
                    reader.readAsDataURL(blob);
                } else {
                    var URL = _global.URL || _global.webkitURL;
                    var url = URL.createObjectURL(blob);
                    if (popup) popup.location = url;
                    else location.href = url;
                    popup = null; 
                    setTimeout(function () {
                        URL.revokeObjectURL(url);
                    }, 4e4);
                }
            }


base64toBlob: function (base64str) {
                    var binary = atob(base64str.replace(/\s/g, ""));
                    var len = binary.length;
                    var buffer = new ArrayBuffer(len);
                    var view = new Uint8Array(buffer);
                    for (var i = 0; i < len; i++) {
                        view[i] = binary.charCodeAt(i);
                    }
                    return new Blob([view], {
                        type: "application/pdf",
                    });
                },