use*_*940 10 html javascript pdf
我想知道是否有办法选择pdf文件input type="file"并使用PDFJS打开它
Sam*_*Sam 31
您应该能够使用FileReader将文件对象的内容作为类型化数组获取,PDFJS接受(http://mozilla.github.io/pdf.js/api/draft/PDFJS.html)
//Step 1: Get the file from the input element
inputElement.onchange = function(event) {
var file = event.target.files[0];
//Step 2: Read the file using file reader
var fileReader = new FileReader();
fileReader.onload = function() {
//Step 4:turn array buffer into typed array
var typedarray = new Uint8Array(this.result);
//Step 5:PDFJS should be able to read this
PDFJS.getDocument(typedarray).then(function(pdf) {
// do stuff
});
};
//Step 3:Read the file as ArrayBuffer
fileReader.readAsArrayBuffer(file);
}
我想我已经设法用新的 API 解决了新问题。正如此 GitHub 问题 中所述，该getDocument功能现在已promise添加到自身中。简而言之，这：
PDFJS.getDocument(typedarray).then(function(pdf) {
// The document is loaded here...
});
变成了这个：
const loadingTask = pdfjsLib.getDocument(typedarray);
loadingTask.promise.then(pdf => {
// The document is loaded here...
});
将旧答案改编为新 api 以符合赏金要求，结果如下：
//Step 1: Get the file from the input element
inputElement.onchange = function(event) {
//It is important that you use the file and not the filepath (The file path won't work because of security issues)
var file = event.target.files[0];
var fileReader = new FileReader();
fileReader.onload = function() {
var typedarray = new Uint8Array(this.result);
//replaced the old function with the new api
const loadingTask = pdfjsLib.getDocument(typedarray);
loadingTask.promise.then(pdf => {
// The document is loaded here...
});
};
//Step 3:Read the file as ArrayBuffer
fileReader.readAsArrayBuffer(file);
}
我在下面创建了一个示例，其中包含以下源代码的官方版本，以表明它正在运行。
/*Offical release of the pdfjs worker*/
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.js';
document.getElementById('file').onchange = function(event) {
var file = event.target.files[0];
var fileReader = new FileReader();
fileReader.onload = function() {
var typedarray = new Uint8Array(this.result);
console.log(typedarray);
const loadingTask = pdfjsLib.getDocument(typedarray);
loadingTask.promise.then(pdf => {
// The document is loaded here...
//This below is just for demonstration purposes showing that it works with the moderen api
pdf.getPage(1).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport({
scale: scale
});
var canvas = document.getElementById('pdfCanvas');
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');
});
});
//end of example code
});
}
fileReader.readAsArrayBuffer(file);
}<html>
<head>
<!-- The offical release-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.js"> </script>
</head>
<body>
<input type="file" id="file">
<h2>Rendered pdf:</h2>
<canvas id="pdfCanvas" width="300" height="300"></canvas>
</body>
</html>希望这可以帮助！如果没有，请发表评论。
这在 jsFiddle 中可能不起作用。
小智 5
我采用了你的代码并且它有效！然后我四处浏览更多技巧，然后我了解到还有一种更方便的方法。
您可以使用以下命令获取客户端加载文件的 URL
URL.createObjectURL()
它减少了一级嵌套，您不需要读取文件、将其转换为数组等。
| 归档时间： |
|
| 查看次数： |
13294 次 |
| 最近记录： |