当前位置：网站首页>pdf. Js----- JS parse PDF file to realize preview, and obtain the contents in PDF file (in array form)

pdf. Js----- JS parse PDF file to realize preview, and obtain the contents in PDF file (in array form)

2022-06-10 20:38:00 【Rulyc】

This article is mainly based on downloading from the official website pdf.js Package , Then introduce the , Simulate an upload operation , Load and parse directly from the front end .
Whole demo Code （ contain pdf Package file ） Please look at Baidu online disk ：
link ：
https://pan.baidu.com/s/17EEmDNyND6PjgZvjyjSzOQ
Extraction code ：jts6
1、 Download it on the official website pdf.js Add in and extract ( Address : http://mozilla.github.io/pdf.js/ )
Insert picture description here
2 modify viewer.js Code

this.textLayer.textContentItemsStr by pdf The specific content of , Is an array

If you need to operate on data , You can change the code in this timer

3、 Simulate an upload interface
stay test.html A native upload event is written in

Insert picture description here
Every upload pdf, Will print out the array

You can also enter the file name directly in the address field ,
http://localhost:63342/pdfjs-2.4.456-es5-dist(1)/web/viewer.html?file= Blockchain e-invoice .pdf
Open console , The array will also print .

The code is

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google" content="notranslate">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> Test acquisition pdf Information </title>

</head>
<body>
<input id="files1" name="fileupload" type="file" value="" onchange="fileChange()" />
</body>
<script>
  var files1 = document.getElementById('files1');
  function fileChange () {
    
    console.log(files1.files[0].name)
    var url = files1.files[0].name;
    // window.location.href = "./viewer.html?file=" + url //  The current page opens 
    window.open("./viewer.html?file=" + url) //  The new interface opens 
  }
</script>
</html>

design sketch ：
Insert picture description here

Open console ：

explain ：
Here is the simulated upload operation , So will pdf On the test.html At the same directory , Here, you can directly use the file name as url. In actual projects , here url Switch to pdf The address of the document .