javascript - 离子从系统中读取文件并将其放入画布中
问题描述
我试图读取存储在文件系统(android)中的文件,然后使用 pdfjs 库将内容放入画布中,这样我就可以在视图中呈现它。与系统pdf查看器相同,它可以工作,但我需要稍后对其进行一些绘画和操作,因此它不能在查看器中显示,它必须在我的应用程序中。
我的 pdf 的渲染效果很好,因为我已经使用实时重新加载模式对其进行了测试。
下面是阅读代码
readFile( pathToFile ){
this.file.resolveLocalFilesystemUrl( pathToFile).then((fileEntry: any) => {
fileEntry.file( (file) => {
var reader = new FileReader();
reader.onloadend = (event) => {
const x = event.target as any;
// let sliced = x._result.slice(x._result.indexOf(',') + 1, x._result.length);
console.log('item', x)
console.log('item', x.result)
console.log('buffer',new Uint8Array(x.result))
// console.log('64', new Uint8Array(x._result));
// const bytes = this.base64ToUint8Array(sliced)
this.renderPDF(x.result, this.container.nativeElement, 1)
};
reader.readAsArrayBuffer(file);
});
});
}
如您所见, pdf1 是最后一个日志,因此 getDocument 的承诺未得到解决:
renderPDF(url, canvasContainer, scale) {
console.log('pdf1')
this.pdfCreator.disableWorker = true;
this.pdfCreator
.getDocument(url)
.then((doc) => {
this.doc = doc;
console.log('pdf2')
this.renderPages(canvasContainer, scale);
})
.catch(err => console.log(err))
}
我花了两天时间没有sccess...
解决方案
我认为网址出了点问题,
你能试试这个吗
readFile( pathToFile ){
this.file.resolveLocalFilesystemUrl( pathToFile).then((fileEntry: any) => {
fileEntry.file( (file) => {
var reader = new FileReader();
reader.onloadend = (event) => {
const x = event.target as any;
// let sliced = x._result.slice(x._result.indexOf(',') + 1, x._result.length);
console.log('item', x)
console.log('item', x.result)
console.log('buffer',new Uint8Array(x.result))
// console.log('64', new Uint8Array(x._result));
// const bytes = this.base64ToUint8Array(sliced)
var blob = new Blob([new Uint8Array(x.result)], {type: 'application/pdf'});
var url = URL.createObjectURL(blob);
this.renderPDF(url, this.container.nativeElement, 1)
};
reader.readAsArrayBuffer(file);
});
});
}
推荐阅读
- python - 确定日期时间是否在 timespec='milliseconds' 中
- javascript - 将样式传递给我的自定义组件在本机反应中不起作用。(样式未附加到我的自定义组件)
- python - 我如何停止迭代?Q-学习算法
- reactjs - 多次重新渲染后,我的反应网站变慢了
- node.js - Socket.io + Node.js CORS 错误阻止了我的请求
- android - MutableStateFlow 收集器不接收数据
- javascript - TypeError: Cannot read properties of undefined (reading 'map')(Existing solution dint help)
- c# - 如何将数据写入 datagridview 中的新行并保存到数据源?
- javascript - 如何迭代深度嵌套的对象数组为数据树创建新的嵌套节点
- angular - 将 Wordpress polylang 语言代码发送到 Angular 应用程序