据我所知,由于安全原因,无法提供javascript的物理文件路径。但是,当我看到Mozilla的pdf.js和mupdf android pdf viewer时,我发现这很有可能。有一种机制可以将文件路径传递给javascript。我探讨了PDF.js,但是当我需要一个简单的解决方案时,似乎很难使用它。
我想将android内部存储文件位置传递到以下代码而不是使用input id="files" type="file"
,这需要我浏览并选择文件。在我的情况下,我想从sdcard传递文件位置。
以下代码实际上将ms word(docx)文件加载为html,然后我将在我的项目的webview中显示。在pdf.js的情况下,我们使用它以类似的方式显示pdf。
<script>
$(document).ready(function(){
//Input File
var $files = $('#files');
//File Change Event
$files.on('change', function (e) {
//File Object Information
var files = e.target.files;
//Create DocxJS
var docxJS = new DocxJS();
//File Parsing
docxJS.parse(
files[0],
function () {
//After Rendering
docxJS.render($('#loaded-layout')[0], function (result) {
if (result.isError) {
console.log(result.msg);
} else {
console.log("Success Render");
}
});
}, function (e) {
console.log("Error!", e);
}
);
});
});
</script>
<input id="files" type="file" name="files[]" multiple="false" />
<div id="loaded-layout" style="width:100%;height:800px;">
</div>
您可以在android here中查看基于PDF.JS的pdfviewer代码。
我在用于输入文件的PDF.js代码中找到了什么: 在index.html文件中包含的pdffile.js中,提到了url变量指向文件的实际位置,即在资源文件夹中,然后在pdf.js中使用,但此时使用似乎令人困惑。有什么方法我可以使用真正的文件路径或以某种方式在android中传递真实路径以查看docx的目的?
更新: 我发现Mozilla的PDF.js实际上将文件位置视为URL,因此url中的文件被转换为javascript文件对象或blob。因此,我使用Ajax从服务器创建了一个url:
var myObject;
var xhr = new XMLHttpRequest();
xhr.open("GET","10143.docx",true); // adding true will make it work asynchronously
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200){
//do some stuff
myObject = this.response;
}
};
xhr.send();
$(document).ready(function(){
//Input File
var $files = $('#files');
//File Change Event
$files.on('change', function (e) {
//File Object Information
var files = myObject.files;
//Create DocxJS
var docxJS = new DocxJS();
//File Parsing
docxJS.parse(
blobToFile(myObject, "10143.docx"),
function () {
//After Rendering
docxJS.render($('#loaded-layout')[0], function (result) {
if (result.isError) {
console.log(result.msg);
} else {
console.log("Success Render");
}
});
}, function (e) {
console.log("Error!", e);
}
);
});
});
function blobToFile(theBlob, fileName){
//A Blob() is almost a File() - it's just missing the two properties below which we will add
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
但是现在我这样做了,我从DocxJS得到了解析错误,如:{isError: true, msg: "Parse Error."}