DEV Community

Imran Iqbal
Imran Iqbal

Posted on

HEIC to PDF Converter – Convert Apple Photos to Universal Format

#converter #webdev #javascript

The HEIC format which stands for High-Efficiency Image Container, was created by Apple and provides great compression while keeping the image quality high. But it doesn't work on all platforms. Changing HEIC images to PDF can fix these compatibility problems and gives you a format that is ready for printing and sharing.
You can use this tool to 👉 Convert HEIC to PDF

✅ What is HEIC?

HEIC is a new type of image format that iOS devices use to save space but still keep great quality. It comes from HEIF which stands for High Efficiency Image Format, and it is made to compress images better than JPEG.
Not every operating system and browser can open HEIC files by themselves, especially the older ones or those that run on Windows. This is why converting to PDF can be really useful.

Benefits of Converting HEIC to PDF

  • 🔓 Universal compatibility – PDFs open on all devices and platforms.
  • 🖨️ Ready for printing – PDF is a standard for document sharing and printing.
  • 📎 Combining multiple images – You can merge HEIC images into a single PDF.
  • 📤 Easy to share – Email and upload PDFs without worrying about compatibility. How to Convert HEIC to PDF Using HTML and JavaScript

Below is a basic example that lets users upload a HEIC file and convert it into a downloadable PDF using JavaScript and the pdf-lib library.

HTML + JavaScript Code

  1. 📄 HTML Structure 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HEIC to PDF Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
    }
    input, button {
      padding: 10px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <h1>HEIC to PDF Converter</h1>
  <input type="file" id="fileInput" accept=".heic">
  <button onclick="convertToPDF()">Convert to PDF</button>
  <p id="status"></p>

  <script src="https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/heic2any/dist/heic2any.min.js"></script>
  <script>
    async function convertToPDF() {
      const fileInput = document.getElementById('fileInput');
      const status = document.getElementById('status');
      if (!fileInput.files.length) {
        alert("Please select a HEIC file first.");
        return;
      }

      const file = fileInput.files[0];
      status.innerText = "Converting...";

      try {
        // Convert HEIC to JPEG using heic2any
        const jpegBlob = await heic2any({ blob: file, toType: "image/jpeg" });

        // Convert Blob to Image
        const imageURL = URL.createObjectURL(jpegBlob);
        const img = new Image();
        img.src = imageURL;
        img.onload = async () => {
          const pdfDoc = await PDFLib.PDFDocument.create();
          const jpgImage = await pdfDoc.embedJpg(await jpegBlob.arrayBuffer());
          const page = pdfDoc.addPage([img.width, img.height]);
          page.drawImage(jpgImage, { x: 0, y: 0, width: img.width, height: img.height });

          const pdfBytes = await pdfDoc.save();
          const blob = new Blob([pdfBytes], { type: "application/pdf" });
          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob);
          link.download = "converted.pdf";
          link.click();

          status.innerText = "Conversion complete! PDF downloaded.";
        };
      } catch (error) {
        console.error(error);
        status.innerText = "Conversion failed. Please try again.";
      }
    }
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

How It Works

  1. The user selects a .heic file using the file input.
  2. The heic2any library converts the HEIC image into JPEG format.
  3. The pdf-lib library creates a PDF and embeds the JPEG.
  4. The result is downloaded as a converted.pdf file.

Live Online Tool
If you're looking for an online tool to convert HEIC files without any coding, try this:
👉 HEIC to PDF converter

Conclusion

Converting HEIC to PDF is a practical way to make your images more accessible and shareable across all platforms. Whether you’re developing your own tool or using an online converter, it’s a smart solution to modern compatibility challenges.

Feel free to use the code above in your own projects or modify it to support multiple file uploads, PDF layout options or image compression.

Top comments (2)

Collapse
 
nathan_tarbert profile image
Nathan Tarbert •

pretty cool, i always hate messing with image formats myself - you think most people care about the best photo quality, or do we just want stuff that works everywhere without extra steps

Collapse
 
dotallio profile image
Dotallio •

Really appreciate the detailed code example, it's super handy for quick custom tools. Have you tried adapting it to handle batch HEIC uploads as multi-page PDFs?