我想在浏览器中显示 pdf 而不是将其存储在服务器上(我有很多存储 pdf 的示例，但这不是我想要的)。问题是我无法找到使其在 IE 中运行的方法(我桌面上的当前版本是 IE11)。看来 IE 不喜欢 URL.createObjectUrl。我在浏览器中尝试兼容模式“Edge”，但没有显示任何内容。这是我的代码:
<!DOCTYPE html> <html lang="fr">
<head>
<title>JavaScript PDF Viewer Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function PreviewImage() {
if(pdffile=document.getElementById("uploadPDF").files != undefined)
{
pdffile=document.getElementById("uploadPDF").files[0];
}
else
{
pdffile=document.getElementById("uploadPDF").value;
}
pdffile_url=URL.createObjectURL(pdffile);
$('#viewer').attr('src',pdffile_url);
}
function Deposer(){
alert("Déposé!");
}
</script>
</head>
<body>
<input id="uploadPDF" type="file" name="myPDF"/>
<input type="button" value="Visualiser" onclick="PreviewImage();" /> <input type="button" value="Déposer" onclick="Deposer();" />
<div style="clear:both">
<iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe>
</div>
</body> </html>
我有一个在 IE 中工作但仅用于图像的示例。
<style type="text/css">
#prevImage {
border: 8px solid #ccc;
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript">
function setImage(file) {
if(document.all)
document.getElementById('prevImage').src = file.value;
else
document.getElementById('prevImage').src = file.files.item(0).getAsDataURL();
if(document.getElementById('prevImage').src.length > 0)
document.getElementById('prevImage').style.display = 'block';
}
</script>
<form>
<input type="file" name="myImage" onchange="setImage(this);" />
</form>
<img id="prevImage" style="display:none;" />
有人已经让它在 IE 中工作了吗？我可以使用 Jquery，但无法安装像 nodejs 这样的框架(我知道 Mozilla 项目 PDF.js，但它使用的是 nodejs)。
最佳答案
最后，可以在没有 nodejs 的情况下使用 pdf.js(感谢 async5)。
我得到了一个解决方案，现在可以在 IE (IE10+) 上使用 pdf.js(使用项目 https://github.com/mozilla/pdfjs-dist)
就是这样:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/pdfjs-dist-master/build/pdf.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if (!PDFJS.workerSrc && typeof document !== 'undefined') {
// workerSrc is not set -- using last script url to define default location
PDFJS.workerSrc = (function () {
'use strict';
var scriptTagContainer = document.body ||
document.getElementsByTagName('head')[0];
var pdfjsSrc = scriptTagContainer.lastChild.src;
return pdfjsSrc && pdfjsSrc.replace(/\.js$/i, '.worker.js');
})();
PDFJS.workerSrc = 'pdfjs-dist-master/build/pdf.worker.js';
}
$("#pdfInp").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
showInCanvas(e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
function convertDataURIToBinary(dataURI) {
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for (i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
function showInCanvas(url) {
// See README for overview
'use strict';
// Fetch the PDF document from the URL using promises
var pdfAsArray = convertDataURIToBinary(url);
PDFJS.getDocument(pdfAsArray).then(function (pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function (page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions
var canvas = 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
};
page.render(renderContext);
});
});
}
});
</script>
</head>
<body>
<form id="form1" >
<p>
<input type='file' id="pdfInp" />
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</p>
</form>
</body>
</html>
关于javascript - 在将 pdf 上传到服务器之前使用 Internet Explorer 预览，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35156798/