在 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. 還嘗試通過創建錨標記並將其目標設置為“_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 在新選項卡中打開，而不是在與我的應用程序相同的選項卡中打開。

PS：我在上面為 Safari 嘗試過的每個解決方案在 Chrome 和 Mozilla Firefox 中都可以完美運行，我只是不知道 Safari 有什么問題。 任何幫助，將不勝感激。

Answer 1

你可以嘗試blob輸出。 然后為此生成一個數據URI，並在新窗口中打開它：

var blob = pdf.output("blob");
window.open(URL.createObjectURL(blob));

Answer 2

如果你能得到你的 PDF 作為 base64，這就是你可以做到的（適用於 Safari 和 Chrome）

let base64PDF = "JVBERi0xLjQKMSAwIG9iago8PAovVGl0bGUgKP....."// your base64 pdf data

let pdfWindow = window.open("", "_blank");

pdfWindow.document.write(
  "<title>Healthcare</title><iframe width='100%' style='margin: -8px;border: none;' height='100%' src='data:application/pdf;base64, " +
  encodeURI(base64PDF) +
  "'></iframe>"
);

Answer 3

嘗試了 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",
                    });
                },