Javascript PDF.js & PDF-LIB Project to Delete Specific Pages inside PDF Document in Browser

Welcome folks today in this blog post we will be deleting pages inside the pdf document using the pdf.js library and pdf-lib library in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF.js Example to Delete Pages inside PDF Document</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://unpkg.com/pdf-lib@1.3.0"></script>
    <script src="https://unpkg.com/downloadjs@1.4.7"></script>
  </head>
  <body>
    <div class="container">
      <h1 class="text-center">Delete Pages inside PDF Document</h1>
      <form id="form">
        <div class="form-group container">
          <input
            type="file"
            accept=".pdf"
            required
            id="files"
            class="form-control"
          />
        </div>
      <div id="result" hidden class="form-group container"></div>
      <h1 class="text-primary container" id="info"></h1>
        <div class="form-group container">
          <button class="btn btn-block btn-danger">Download PDF</button>
        </div>
      </form>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script>
  <script>
    const { PDFDocument } = PDFLib;

    let form = document.getElementById("form");

    form.addEventListener("submit", (e) => {
      e.preventDefault();

      for (var option of document.getElementById("pages").options) {
        if (option.selected) {
          selectedPages.push(option.value);
        }
      }

      console.log(selectedPages);

      removepages(typedarray, numberOfPages, selectedPages);

      inputElement.value = ""
      document.getElementById('pages').innerHTML = ""
      document.getElementById('result').style.display="none"
      document.getElementById('info').innerHTML=''
    });

    let selectedPages = [];

    let numberOfPages;

    let inputElement = document.getElementById("files");

    let pageSelectElement = document.getElementById("pages");

    let typedarray;

    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
        typedarray = new Uint8Array(this.result);

        //Step 5:pdfjs should be able to read this
        const loadingTask = pdfjsLib.getDocument(typedarray);

        loadingTask.promise.then(async (pdf) => {
          document.getElementById("info").innerHTML =
            "The number of Pages inside pdf document is " + pdf.numPages;
          // The document is loaded here...

          let result = document.getElementById("result");

          numberOfPages = pdf.numPages;

          let pages = [];

          for (let i = 0; i < pdf.numPages; i++) {
            pages.push(i);
          }

          console.log(pages);

          let html = `
          <label for="select pages">Select Pages of PDF You want to Delete:</label>
        <select id="pages" class="form-control" name="sites-list" size="${
          pdf.numPages
        }" multiple>
            
        ${appendOption(pages)}
            
            </select>`;

          result.innerHTML = html;

          console.log(html);

          result.style.display = "block";
        });
      };
      //Step 3:Read the file as ArrayBuffer
      fileReader.readAsArrayBuffer(file);
    };

    function appendOption(pages) {
      let html = "";
      pages.forEach((page) => {
        html += `
            
             <option value="${page + 1}">${page + 1}</option>
            
            `;
      });

      return html;
    }

    async function removepages(typedarray, pages, selectedPages) {
      const pdfDoc = await PDFDocument.load(typedarray);
      // Get the first page of the document
      console.log(selectedPages);
      console.log(pages);

      selectedPages.forEach((page, index) => {
        console.log(page - 1);
        pdfDoc.removePage(page - 1 - index);
      });

      const pdfBytes = await pdfDoc.save();

      // Trigger the browser to download the PDF document
      download(pdfBytes, "pdf-lib_modification_example.pdf", "application/pdf");
    }

    window.onmousedown = function (e) {
      var el = e.target;
      if (
        el.tagName.toLowerCase() == "option" &&
        el.parentNode.hasAttribute("multiple")
      ) {
        e.preventDefault();

        // toggle selection
        if (el.hasAttribute("selected")) el.removeAttribute("selected");
        else el.setAttribute("selected", "");

        // hack to correct buggy behavior
        var select = el.parentNode.cloneNode(true);
        el.parentNode.parentNode.replaceChild(select, el.parentNode);
      }
    };
  </script>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

<!DOCTYPE html>

<head>

<title>PDF.js Example to Delete Pages inside PDF Document</title>

<link

rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"

</head>

<body>

<h1 class="text-center">Delete Pages inside PDF Document</h1>

<input

type="file"

accept=".pdf"

required

id="files"

class="form-control"

</div>

<button class="btn btn-block btn-danger">Download PDF</button>

</div>

</form>

</div>

</body>

const { PDFDocument } = PDFLib;

let form = document.getElementById("form");

form.addEventListener("submit", (e) => {

e.preventDefault();

for (var option of document.getElementById("pages").options) {

if (option.selected) {

selectedPages.push(option.value);

}

console.log(selectedPages);

removepages(typedarray, numberOfPages, selectedPages);

inputElement.value = ""

document.getElementById('pages').innerHTML = ""

document.getElementById('result').style.display="none"

document.getElementById('info').innerHTML=''

});

let selectedPages = [];

let numberOfPages;

let inputElement = document.getElementById("files");

let pageSelectElement = document.getElementById("pages");

let typedarray;

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

typedarray = new Uint8Array(this.result);

//Step 5:pdfjs should be able to read this

const loadingTask = pdfjsLib.getDocument(typedarray);

loadingTask.promise.then(async (pdf) => {

document.getElementById("info").innerHTML =

"The number of Pages inside pdf document is " + pdf.numPages;

// The document is loaded here...

let result = document.getElementById("result");

numberOfPages = pdf.numPages;

let pages = [];

for (let i = 0; i < pdf.numPages; i++) {

pages.push(i);

}

console.log(pages);

let html = `

<label for="select pages">Select Pages of PDF You want to Delete:</label>

<select id="pages" class="form-control" name="sites-list" size="${

pdf.numPages

}" multiple>

${appendOption(pages)}

</select>`;

result.innerHTML = html;

console.log(html);

result.style.display = "block";

});

};

//Step 3:Read the file as ArrayBuffer

fileReader.readAsArrayBuffer(file);

};

function appendOption(pages) {

let html = "";

pages.forEach((page) => {

html += `

});

return html;

}

async function removepages(typedarray, pages, selectedPages) {

const pdfDoc = await PDFDocument.load(typedarray);

// Get the first page of the document

console.log(selectedPages);

console.log(pages);

selectedPages.forEach((page, index) => {

console.log(page - 1);

pdfDoc.removePage(page - 1 - index);

});

const pdfBytes = await pdfDoc.save();

// Trigger the browser to download the PDF document

download(pdfBytes, "pdf-lib_modification_example.pdf", "application/pdf");

}

window.onmousedown = function (e) {

var el = e.target;

if (

el.tagName.toLowerCase() == "option" &&

el.parentNode.hasAttribute("multiple")

) {

e.preventDefault();

// toggle selection

if (el.hasAttribute("selected")) el.removeAttribute("selected");

else el.setAttribute("selected", "");

// hack to correct buggy behavior

var select = el.parentNode.cloneNode(true);

el.parentNode.parentNode.replaceChild(select, el.parentNode);

}

};

</script>

</html>

As you can see in the above code we are including the pdf.js library and also the pdf-lib library. And in the html we have the input field to allow users to select pdf documents and then we have the button to delete pages inside the pdf document. And when the user selects the pdf document then we have the no of pages displayed in the browser and in the select box we allow the user to select individual pages to delete pages in pdf document and then you can download the result as pdf document.