问题描述
对于各种复杂的阅读，我发现我必须在iFrame中显示pdf。我正在使用https://github.com/mozilla/pdf.js上的pdf.js库，该库功能强大且有用。我可以使用该库来选择，加载和显示pdf，如jsfiddle的https://jsfiddle.net/peterrr73/5es3dwkp/latest/所示。一切似乎都很好。
<html lang="en">
<head>
<title>Test load pdf</title>
<script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script type="text/javascript">
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
</script>
</head>
<body>
<input type="file" id="fileinput" />
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
document.querySelector('#fileinput').addEventListener('change',function(){
if(this.files.length===0)
return;
// gets first selected file
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
//do stuff with it here
var pdfsrc = e.target.result;
pdfsrc=pdfsrc.replace("data:application/pdf;base64,","");
var pdf1=atob(pdfsrc);
var loadingTask = pdfjsLib.getDocument({data: pdf1});
loadingTask.promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var viewport = page.getViewport({scale: 2});
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,viewport: viewport
};
page.render(renderContext);
});
});
};
reader.readAsDataURL(file);
},false);
</script>
</html>
但是，如果我设置了将pdf加载到iFrame的功能，则会发生奇怪的事情。您可以在https://jsfiddle.net/peterrr73/w4qace81/latest/上看到它。在iFrame中，所有文本-仅文本-都是乱码。
<html lang="en">
<head>
<title>Test load pdf</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.2.3.min.js"
integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script type="text/javascript">
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
</script>
<script type="text/javascript">
function choosePDF() {
var p4='<input type="file" id="fileinput"/>\
<canvas id="canvas"></canvas>';
$('#pdf').contents().find('body').html(p4);
var iframe=document.querySelector('#pdf');
iframe.contentWindow.document.querySelector('#fileinput').addEventListener('change',function(){
if(this.files.length===0) return;
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var pdfsrc = e.target.result;
pdfsrc=pdfsrc.replace('data:application/pdf;base64,','');
var pdf1=atob(pdfsrc);
var loadingTask = pdfjsLib.getDocument({data: pdf1});
loadingTask.promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var viewport = page.getViewport({scale: 2});
var canvas = iframe.contentWindow.document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,viewport: viewport
};
page.render(renderContext);
});
});
};
reader.readAsDataURL(file);
},false);
}
</script>
</head>
<body>
<div>
<iframe id="pdf" height="700px" width="500px" onLoad="choosePDF();">
</iframe>
</div>
</body>
</html>
我希望这与在调用文档和嵌入式iFrame之间传递参数等的方式有关。但是我无法确切知道它是什么。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
设置时间 控制面板
错误1：Request method ‘DELETE‘ not supported 错误还原：...