问题 - Base 64 PDF 字符串未在 IE 11 中呈现



我想在IE 11中显示Base64 PDF,
我将PDF Base 64格式转换为Blob并尝试将其渲染为IE,但它不起作用,但它在Chrome中有效。我正在使用 SharePoint 框架列表视图命令集 我尝试使用iFrame,对象,嵌入,但仍然没有运气 我还尝试了另外 1 种方法,但它正在下载 pdf 而不是在浏览器新选项卡中打开它。 我也打开了问题 n github 以及 https://github.com/mozilla/pdf.js/issues/11461 代码开始

//Get pdf in Base64 format
const pdfBytes1 = await pdfDoc.saveAsBase64({
dataUri: true
});
//Remove data:application/pdf;base64, from pdfbytes string
var res = pdfBytes1.split("data:application/pdf;base64,")[1];
var bytes = atob(res);
//Below code downloads the pdf file instead of opening the browser
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
var byteCharacters = atob(res);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], {
type: 'application/pdf'
});
window.navigator.msSaveOrOpenBlob(blob, "Test.pdf");
} else {
// Directly use base 64 encoded data for rest browsers (not IE)
var base64EncodedPDF = res;
var dataURI = pdfBytes1;
window.open(dataURI, '_blank');
}
//Converting base64 format to blob
const pdfBytes1 = await pdfDoc.save()
var byteArray = new Uint8Array(pdfBytes);
var blob = new Blob([byteArray], {
type: 'application/pdf'
});
var tab = window.open();
var objectUrl = URL.createObjectURL(blob);
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
//Trying to load it in iFrame
var iframe = document.createElement("iframe");
iframe.src = objectUrl;
iframe.setAttribute("style", "width:100%;height:100%");
tab.document.appendChild(iframe);
// Second approach. 
var mywindow = window.open('about:blank', 'Print', 'height=800,width=900');
mywindow.document.write('<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> ')
mywindow.document.write('<!DOCTYPE html><head>');
mywindow.document.write('<link rel="stylesheet" href="./css/scr.css" type="text/css" />');
mywindow.document.write('</head><body><iFrame  src=' + objectUrl + '></iFrame>');
//add logos and legend here.
mywindow.document.write('<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> ')
//mywindow.document.body.appendChild(iframe);        
mywindow.document.write('</div></body></html>');
mywindow.document.write('<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> ')
//window.navigator.msSaveOrOpenBlob(blob);
} else {
var objectUrl = URL.createObjectURL(blob);
window.open(objectUrl);
}
//Below code opens blank iFrame page in IE
//let pdfWindow = window.open("");
// pdfWindow.document.write("<iframe width='100%' id='printf' name='printf' height='100%' src='"+encodeURI(pdfBytes1)+"'></iframe>");
====================================================
I have tried with pdf.js. Its working in Chrome but not in IE.
Below is the code snippet.

代码开始

import {getDocument} from 'pdfjs-dist' ;
var loadingTask = getDocument({data: bytes});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport({scale: scale});
// Prepare canvas using PDF page dimensions
document.write('<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> ')
document.write('<!DOCTYPE html><head>');
document.write('</head><body><canvas id="the-canvas" ></canvas>'); 
document.write('</body></html>');                     
var canvas : any = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
======================================

其他方法

I have also tried easyPDF.js but no luck
https://www.jqueryscript.net/other/Base64-PDF-Viewer-Easy-PDF.html.
Quick help would be appreciated.

您無法在 IE 瀏覽器中渲染 BASE 64 PDF。

对于IE浏览器,您需要使用msSaveOrOpenBlob((。

Navigator.msSaveOrOpenBlob(( 方法将文件或 Blob 保存到磁盘。此方法的行为方式与 Navigator.msSaveBlob(( 相同,只是这会启用文件打开选项。

引用:

(1( msSaveOrOpenBlob 方法

(2( msSaveOrOpenBlob

最新更新