Skip to main content

How To Add Compress PDF Widgets In Blogger Blog

Add Compress PDF Widgets In Blogger Blog : 

  • >> 1.) Go To Blogger 
  • >> 2.) Blog Dashboard 
  • >> 3.) Layout 
  • >> 4.) +Add a Gadget 
  • >> 5.) Choose The HTML/Javascript Widgets 
  • >> 6.) Copy Below HTML/Javascript Code and Paste Content Box Her 
  • >> 7.) Save HTML Javascript Widgets 
  • >> 8.) Now Last Save Layout Settings.

Compress PDF To Low MB Online Using HTML and JavaScript (Blogger Tool) : 

<!doctype html>
<style>
body{
  margin:0;
  padding:0;
  font-family:'Segoe UI',sans-serif;
  background:#f2f2f2;
}
.pdf-compress-box{
  max-width:340px;
  margin:40px auto;
  background:#fff;
  padding:22px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}
.pdf-compress-box h2{
  font-size:20px;
  color:#3f51b5;
  margin-bottom:15px;
}
.pdf-compress-box input,
.pdf-compress-box button{
  width:100%;
  padding:10px;
  margin-top:10px;
  border-radius:10px;
  border:1px solid #ccc;
}
.pdf-compress-box button{
  background:#3f51b5;
  color:#fff;
  font-weight:600;
  border:none;
  cursor:pointer;
}
.pdf-compress-box button:hover{
  background:#303f9f;
}
#status{
  margin-top:12px;
  font-size:14px;
  color:#388e3c;
}
</style>

<div class="pdf-compress-box">
  <h2>📉 Compress PDF</h2>
  <input type="file" id="pdfFile" accept="application/pdf" />
  <button onclick="compressPDF()">Compress PDF</button>
  <div id="status"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>

<script>
async function compressPDF(){
  const fileInput = document.getElementById("pdfFile");
  const status = document.getElementById("status");

  if(!fileInput.files.length){
    alert("Please select a PDF file");
    return;
  }

  status.innerHTML = "⏳ Compressing PDF...";

  const file = fileInput.files[0];
  const arrayBuffer = await file.arrayBuffer();

  const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);

  // Re-save PDF (removes extra metadata → size reduced)
  const compressedBytes = await pdfDoc.save({
    useObjectStreams: true,
    addDefaultPage: false
  });

  const blob = new Blob([compressedBytes], {type:'application/pdf'});
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = "compressed.pdf";
  a.click();

  URL.revokeObjectURL(url);

  status.innerHTML = "✅ PDF compressed & downloaded successfully!";
}
</script></!doctype>

Comments