Lecture d'un simple PDF en local avec la librairie pdfjs
Salut à tous,
Je cherche à mettre en place un visualiseur de PDF dans une application Electron.js. Pour cela j'essaie d'utiliser la librairie pdf.js.
Néanmoins tous ce que j'essaie de faire ce solde pour des erreurs et je n'arrive pas bien à comprendre ce que je dois fournir ou comment le fournir à pdf.js afin de pouvoir visualiser un pdf.
Des ressources existent sur internet mais ce base toutes sur le fait que la ressource PDF provient d'un upload user ou d'un appel asynchrone vers une ressource externe. Alors que dans mon cas, je possède déjà le pdf en local.
Ainsi je ne peux pas travailler avec des fetch() ou autre input file.
Existe t-il des personnes ayant déjà utilisé cette librairie pouvant m'éclairer sur comment procéder pour visualiser un pdf.
Entre les ArrayBuffer, Base64, URLformatted et autres blob, j'ai du mal à saisir comment procéder pour fournir l'information que la librairie à besoin.
Dans mon exemple j'essaie de visualiser le fichier helloworld.pdf que j'ai récupérer dans l'exemple officiel du site de la librairie pdf.js (donc fichier non corrompu ou autres bizarrerie)
Code:
1
2
3
4
5
6
| const utils = new Utils()
let fileObject = utils.fileToBase64('/Users/xxxxx/xxxx/test/helloworld.pdf')
let blobObject = utils.base64ToBlob(fileObject)
this.path = fileObject |
Code:
<iframe height="100%" width="100%" :src="'pdfjs/web/viewer.html?file='+path"></iframe>
Code:
1
2
3
4
5
6
7
8
9
10
| fileToBase64(filepath)
{
let file = fs.readFileSync(filepath, 'utf8')
return btoa(unescape(encodeURIComponent(file)))
}
getFileObject(filepath)
{
return fs.readFileSync(filepath, 'utf8')
} |
Il s'agit d'un exemple basique mis en place mais j'ai essayer vraiment beaucoup de choses. Il se vraiment très long et décourageant pour mes futurs lecteurs de tous les énumérés.
Ce bout de code me génère l'erreur suivante :
Citation:
cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js?!./src/views/modal/ViewerPDF.vue?vue&type=script&lang=js&:94 Blob {size: 678, type: "application/pdf"}
15:31:38.380 viewer.js:1801
http://localhost:8080 (console.log(origin))
15:31:38.380 viewer.js:1802
http://localhost:8080 (console.log(viewerOrigin))
15:31:38.448 pdf.worker.js:1033 Warning: getHexString - ignoring invalid character: 33
15:31:38.448 pdf.worker.js:1033 Warning: getHexString - ignoring invalid character: 79
15:31:38.449 pdf.worker.js:1033 Warning: getHexString - ignoring additional invalid characters.
15:31:38.449 pdf.worker.js:1033 Warning: getHexString - ignoring invalid character: 104
15:31:38.449 pdf.worker.js:1033 Warning: getHexString - ignoring invalid character: 109
15:31:38.452 pdf.worker.js:1033 Warning: getHexString - ignoring additional invalid characters.
15:31:38.452 pdf.worker.js:1033 Warning: getHexString - ignoring invalid character: 104
15:31:38.453 pdf.worker.js:1033 Warning: Indexing all PDF objects
15:31:38.454 viewer.html:1 Uncaught (in promise) InvalidPDFException {message: "Invalid PDF structure.", name: "InvalidPDFException"}
Mais d'après cet exemple simple auriez-vous des conseils à me donner ou des pistes à envisager pour réussir à visualiser ce simple PDF ?
Je crois que je ne me suis jamais autant pris la tête sur l'utilisation d'une librairie que pdf.js....
Merci d'avance à tous pour vos précieux éclairages ;)
