100% Free JavaScript Library to Manipulate PDF Documents - Professional & Powerful

Product Page | Documentation | Examples | Forum | Temporary License | Customized Demo

Free Spire.PDF for JavaScript is a robust PDF library that enables developers to create, modify, convert, and save PDF files within JavaScript applications, without relying on external dependencies. This JavaScript API provides extensive functionality, allowing users to generate PDFs from scratch or efficiently process existing documents through JavaScript code.

Free Spire.PDF for JavaScript offers a wide range of advanced features, including encryption settings, text and image extraction, PDF splitting and merging, and the ability to draw text, images, shapes, and barcodes. It also supports managing PDF layers, overlaying documents, inserting watermarks, handling bookmarks, adding tables, and compressing PDF files. Furthermore, the library enables smooth conversions between PDF and multiple formats such as XPS, SVG, Excel, Word, HTML, and PDF/A, ensuring high-quality output.

Friendly Reminder: Free version is limited to 10 pages of PDF. This limitation is enforced during writing PDF. When converting PDF to Image, XPS, Word, HTML, you can only get the first 3 pages of file. Upgrade to Commercial Edition of Spire.PDF for JavaScript. We don't provide technical or any other support to the users of the free versions.

Core Features & Functionality

Rich PDF Version Support

• PDF 1.2 to PDF 1.7
• PDF/A1
• PDF/A2
• PDF/A3
• PDF/A - 1b
• PDF/UA
• PDF/x1a

Flexible PDF Document Conversions

• Convert PDF to images (PNG, JPG, BMP, etc.) for data distribution
• Convert PDF to Word documents for easy content editing
• Convert PDF to Excel workbooks for convenient data managing
• Convert PDF to HTML for web design

Efficient PDF Management Made Easy

Free Spire.PDF for JavaScript enables you to generate text, images, tables, barcodes, and shapes, extract content, and handle form fields effortlessly. It also supports adding watermarks, bookmarks, hyperlinks, annotations, attachments, and stamping PDFs with text or images.

Rich Document Settings Features

Free Spire.PDF for JavaScript simplifies document management, allowing you to set properties, adjust viewer preferences, modify page size and orientation, count pages, and retrieve page dimensions.

Comprehensive PDF Security Features

Free Spire.PDF for JavaScript offers robust security options, including adding, removing, and verifying digital signatures. It also supports encryption, decryption, setting permissions, and detecting modifications in signed PDFs.

Code Examples

Find and Highlight Text in PDF

<template>
  <span>The following example demonstrates how to find and highlight text in PDF document.</span>
  <el-button @click="startProcessing">Start</el-button>
  <a v-if="downloadUrl" :href="downloadUrl" :download="downloadName">
    Click here to download the generated file
  </a>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const downloadUrl = ref(null);
    const downloadName = ref("");

    const startProcessing = async () => {
      wasmModule = window.wasmModule;
      if (wasmModule) {
        // Load the sample file into the virtual file system (VFS)
        let inputFileName = 'FindAndHighlightText.pdf';
        await wasmModule.FetchFileToVFS(inputFileName, '', `${import.meta.env.BASE_URL}static/data/`);

        // Create a pdf instance
        let doc = wasmModule.PdfDocument.Create();

        // Load a pdf file
        doc.LoadFromFile({fileName: inputFileName});

        for (let i = 0; i < doc.Pages.Count; i++) {
            let page = doc.Pages.get_Item(i);
            // Create a PdfTextFinder object for the current page
            let finder = wasmModule.PdfTextFinder.Create(page);
            finder.Options.Parameter = wasmModule.TextFindParameter.WholeWord;
            // Find the occurrences of the specified text
            let finds = finder.Find("science");
            // Let finds = finder.FindAllText();

            // Highlight the found text
            for (let j = 0; j < finds.length; j++) {
                finds[j].HighLight();
            }
        }

        // Define the output file name
        const outputFileName = "FindAndHighlightText_out.pdf";

        // Save the document to the specified path
        doc.SaveToFile({fileName: outputFileName});
        doc.Close();

        // Read the saved file and convert to a Blob object
        const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
        const modifiedFile = new Blob([modifiedFileArray], { type: "application/pdf" });

        // Download the file
        downloadName.value = outputFileName;
        downloadUrl.value = URL.createObjectURL(modifiedFile);
      }
    };

    return {
      startProcessing,
      downloadName,
      downloadUrl,
    };
  },
};
</script>

Add Free Text Annotations in PDF

<template>
  <span>The following example demonstrates how to add free text annotation in PDF document.</span>
  <el-button @click="startProcessing">Start</el-button>
  <a v-if="downloadUrl" :href="downloadUrl" :download="downloadName">
    Click here to download the generated file
  </a>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const downloadUrl = ref(null);
    const downloadName = ref("");

    const startProcessing = async () => {
      wasmModule = window.wasmModule;
      if (wasmModule) {
        // Load the sample file into the virtual file system (VFS)
        let inputFileName = "AddFreeTextAnnotation.pdf";
        await wasmModule.FetchFileToVFS(inputFileName, "", `${import.meta.env.BASE_URL}static/data/`);

        // Create a PDF document
        let doc = wasmModule.PdfDocument.Create();

        // Load the PDF fle
        doc.LoadFromFile({ fileName: inputFileName });

        // Get the first page
        let page = doc.Pages.get_Item(0);

        // Define a rectangle for the free text annotation
        let rect = wasmModule.RectangleF.Create({ x: 0, y: 300, width: 100, height: 80 });

        // Create a free text annotation and set its properties
        let textAnnotation = wasmModule.PdfFreeTextAnnotation.Create(rect);
        textAnnotation.Text = "\n  Spire.PDF";

        // Set border style for annotation
        let border = wasmModule.PdfAnnotationBorder.Create({ borderWidth: 1 });
        textAnnotation.Border = border;
        textAnnotation.BorderColor = wasmModule.PdfRGBColor.Create({ color: wasmModule.Color.get_Gray() });
        textAnnotation.LineEndingStyle = wasmModule.PdfLineEndingStyle.Slash;

        // Set font properties for the annotation
        let font = wasmModule.PdfFont.Create({ fontFamily: wasmModule.PdfFontFamily.TimesRoman, size: 20 });
        textAnnotation.Font = font;

        // Set color and opacity for the text annotation
        textAnnotation.Color = wasmModule.PdfRGBColor.Create({ color: wasmModule.Color.get_LightBlue() });
        textAnnotation.Opacity = 0.8;

        // Add the free text annotation to the page
        page.Annotations.Add(textAnnotation);

        // Define a rectangle for the second free text annotation
        rect = wasmModule.RectangleF.Create({ x: 150, y: 200, width: 150, height: 40 });
        textAnnotation = wasmModule.PdfFreeTextAnnotation.Create(rect);
        textAnnotation.Text = "\nHigh Fidelity Pdf file Conversion";

        // Set border style and font for the second annotation
        border = wasmModule.PdfAnnotationBorder.Create({ borderWidth: 1 });
        font = wasmModule.PdfFont.Create({ fontFamily: wasmModule.PdfFontFamily.Helvetica, size: 10 });
        textAnnotation.Font = font;
        textAnnotation.Border = border;
        textAnnotation.BorderColor = wasmModule.PdfRGBColor.Create({ color: wasmModule.Color.get_LightGoldenrodYellow() });
        textAnnotation.LineEndingStyle = wasmModule.PdfLineEndingStyle.RClosedArrow;
        textAnnotation.Color = wasmModule.PdfRGBColor.Create({ color: wasmModule.Color.get_LightPink() });
        textAnnotation.Opacity = 0.8;

        // Add the second annotation to the page
        page.Annotations.Add(textAnnotation);

        // Define a rectangle for the third free text annotation
        rect = wasmModule.RectangleF.Create({ x: 150, y: 280, width: 280, height: 40 });
        textAnnotation = wasmModule.PdfFreeTextAnnotation.Create(rect);
        textAnnotation.Text = "\nEasily Manipulate document and Form fields";

        // Set border style and font for the third annotation
        border = wasmModule.PdfAnnotationBorder.Create({ borderWidth: 1 });
        font = wasmModule.PdfFont.Create({ fontFamily: wasmModule.PdfFontFamily.Helvetica, size: 10 });
        textAnnotation.Font = font;
        textAnnotation.Border = border;
        textAnnotation.BorderColor = wasmModule.PdfRGBColor.Create({ color: wasmModule.Color.get_Gray() });
        textAnnotation.LineEndingStyle = wasmModule.PdfLineEndingStyle.Circle;
        textAnnotation.Color = wasmModule.PdfRGBColor.Create({ color: wasmModule.Color.get_LightSkyBlue() });
        textAnnotation.Opacity = 0.8;

        // Add the third annotation to the page
        page.Annotations.Add(textAnnotation);

        // Define a rectangle for the fourth free text annotation
        rect = wasmModule.RectangleF.Create({ x: 150, y: 360, width: 200, height: 40 });
        textAnnotation = wasmModule.PdfFreeTextAnnotation.Create(rect);
        textAnnotation.Text = "\nSecurity features";

        // Set border style and font for the fourth annotation
        border = wasmModule.PdfAnnotationBorder.Create({ borderWidth: 1 });
        font = wasmModule.PdfFont.Create({ fontFamily: wasmModule.PdfFontFamily.Helvetica, size: 10 });
        textAnnotation.Font = font;
        textAnnotation.Border = border;
        textAnnotation.BorderColor = wasmModule.PdfRGBColor.Create({ color: wasmModule.Color.get_Pink() });
        textAnnotation.LineEndingStyle = wasmModule.PdfLineEndingStyle.RClosedArrow;
        textAnnotation.Color = wasmModule.PdfRGBColor.Create({ color: wasmModule.Color.get_LightGreen() });
        textAnnotation.Opacity = 0.8;

        // Add the fourth annotation to the page
        page.Annotations.Add(textAnnotation);

        // Define a rectangle for the fifth free text annotation
        rect = wasmModule.RectangleF.Create({ x: 150, y: 440, width: 200, height: 40 });
        textAnnotation = wasmModule.PdfFreeTextAnnotation.Create(rect);
        textAnnotation.Text = "\nExtract data from Pdf documents";

        // Set border style and font for the fifth annotation
        border = wasmModule.PdfAnnotationBorder.Create({ borderWidth: 1 });
        font = wasmModule.PdfFont.Create({ fontFamily: wasmModule.PdfFontFamily.Helvetica, size: 10 });
        textAnnotation.Font = font;
        textAnnotation.Border = border;
        textAnnotation.BorderColor = wasmModule.PdfRGBColor.Create({ color: wasmModule.Color.get_OrangeRed() });
        textAnnotation.LineEndingStyle = wasmModule.PdfLineEndingStyle.RClosedArrow;
        textAnnotation.Color = wasmModule.PdfRGBColor.Create({ color: wasmModule.Color.get_LightGoldenrodYellow() });
        textAnnotation.Opacity = 0.8;

        // Add the fifth annotation to the page
        page.Annotations.Add(textAnnotation);

        // Define the output file name
        const outputFileName = "AddFreeTextAnnotation_result.pdf";

        // Save the document to the specified path
        doc.SaveToFile({ fileName: outputFileName });

        // Clean up resources
        doc.Close();

        // Read the saved file and convert to a Blob object
        const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
        const modifiedFile = new Blob([modifiedFileArray], { type: "application/pdf" });

        // Download the file
        downloadName.value = outputFileName;
        downloadUrl.value = URL.createObjectURL(modifiedFile);
      }
    };

    return {
      startProcessing,
      downloadName,
      downloadUrl,
    };
  },
};
</script>

Convert PDF to SVG

<template>
  <span>The following example demonstrates how to convert PDF document to SVG document.</span>
  <el-button @click="startProcessing">Start</el-button>
  <a v-if="downloadUrl" :href="downloadUrl" :download="downloadName">
    Click here to download the generated file
  </a>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const downloadUrl = ref(null);
    const downloadName = ref("");

    const startProcessing = async () => {
      wasmModule = window.wasmModule;
      if (wasmModule) {

        // Load the sample file into the virtual file system (VFS)
        let inputFileName = "ToSVG.pdf";
        await wasmModule.FetchFileToVFS(inputFileName,"",`${import.meta.env.BASE_URL}static/data/`);
        // Create a document
        let doc = wasmModule.PdfDocument.Create();
      	doc.LoadFromFile(inputFileName);

        // Define the output file name
        const outputFileName = "ToSVG_result.svg";

        // Save the document to the specified path
        doc.SaveToFile({fileName: outputFileName,fileFormat: wasmModule.FileFormat.SVG});
        doc.Close();

        // Read the saved file and convert to a Blob object
        const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
        const modifiedFile = new Blob([modifiedFileArray], { type: "image/svg+xml" });

        // Download the file
        downloadName.value = outputFileName;
        downloadUrl.value = URL.createObjectURL(modifiedFile);
      }
    };

    return {
      startProcessing,
      downloadName,
      downloadUrl,
    };
  },
};
</script>

Reset Page Size of PDF

<template>
  <span>The following example demonstrates how to reset page size of PDF document.</span>
  <el-button @click="startProcessing">Start</el-button>
  <a v-if="downloadUrl" :href="downloadUrl" :download="downloadName">
    Click here to download the generated file
  </a>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const downloadUrl = ref(null);
    const downloadName = ref("");

    const startProcessing = async () => {
      wasmModule = window.wasmModule;
      if (wasmModule) {

        // Load the sample file into the virtual file system (VFS)
        let inputFileName = "ResetPageSize.pdf";
        await wasmModule.FetchFileToVFS(inputFileName,"",`${import.meta.env.BASE_URL}static/data/`);
        // Create a PPT document
        let doc = wasmModule.PdfDocument.Create();
      	doc.LoadFromFile(inputFileName);

        // Set the margins
        let margins = wasmModule.PdfMargins.Create();
        // Create a new pdf document
        let newDoc = wasmModule.PdfDocument.Create();
        let scale = 0.8;
        for (let i=0;i<doc.Pages.Count;i++) {
            let page = doc.Pages.get_Item(i);
            // Use same scale to set width and height
            let width = page.Size.Width * scale;
            let height = page.Size.Height * scale;
            // Add new page with expected width and height
            let newPage = newDoc.Pages.Add({size:wasmModule.SizeF.Create({width:width,height: height}),margins: margins});
            newPage.Canvas.ScaleTransform(scale, scale);
            // Copy content of original page into new page
            newPage.Canvas.DrawTemplate({template:page.CreateTemplate(), location:wasmModule.PointF.Create()});
        }

        // Define the output file name
        const outputFileName = "ResetPageSize_out.pdf";

        // Save the document to the specified path
        doc.SaveToFile({fileName: outputFileName});
        doc.Close();

        // Read the saved file and convert to a Blob object
        const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
        const modifiedFile = new Blob([modifiedFileArray], { type: "application/pdf" });

        // Download the file
        downloadName.value = outputFileName;
        downloadUrl.value = URL.createObjectURL(modifiedFile);
      }
    };

    return {
      startProcessing,
      downloadName,
      downloadUrl,
    };
  },
};
</script>

Product Page | Documentation | Examples | Forum | Temporary License | Customized Demo