个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 22:11:17 25 4
gpt4 key购买 nike

我想在 IE 11 中显示 Base64 PDF
我将 PDF Base 64 格式转换为 Blob 并尝试将其渲染到 IE，但它不起作用，但它在 Chrome 中有效。我正在使用 Sharepoint Framework ListView 命令集 我尝试了 iFrame、Object、Embed，但仍然没有成功 我还尝试了另一种方法，但它是下载 pdf，而不是在浏览器新选​​项卡中打开它。 我也打开了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 method

(2) msSaveOrOpenBlob

关于javascript - 问题 - Base 64 PDF 字符串未在 IE 11 中呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59550136/

25 4 0
文章推荐： javascript - 如何在JavaScript函数之外访问局部变量？
文章推荐： javascript - 如何使用 javascript json 保存语言
文章推荐： javascript - 仅对数组的部分内容进行排序
文章推荐： javascript - 'import' 和 'export' 可能仅与 'sourceType: "模块一起出现"' (16 :0)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com