Syncfusion AI Assistant

How can I help you?

Customize the appearance of PDF Form Fields in Vue PDF Viewer

4 Feb 20266 minutes to read

Styling customizes appearance only (font, color, alignment, border, background, indicator text).

Customize Appearance of Form Fields Using the UI

Use the Properties panel to adjust:

  • Font family/size, text color, alignment
  • Border color/thickness
  • Background color
    Textbox style from UI

Customize appearance Form Fields Programmatically

Use updateFormField() to apply styles.

<template>
  <div>
    <button @click="updateTextboxStyle">Update Textbox Style</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    updateTextboxStyle() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Retrieve form fields collection
      const fields = pdfviewer.retrieveFormFields();
      // Find the textbox field by name
      const tb = fields.find(f => f.name === 'First Name') || fields[0];
      if (tb) {
        // Update textbox field styling
        pdfviewer.formDesignerModule.updateFormField(tb, {
          value: 'John',
          fontFamily: 'Courier',
          fontSize: 12,
          fontStyle: 'None',
          color: 'black',
          borderColor: 'black',
          backgroundColor: 'white',
          alignment: 'Left',
          thickness: 2
        });
      }
    }
  }
};
</script>

Set Default Styles for New Form Fields

Define defaults so fields added from the toolbar inherit styles.

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Apply defaults for Textbox added from toolbar
      pdfviewer.textFieldSettings = {
        name: 'Textbox',
        isReadOnly: false,
        visibility: 'visible',
        isRequired: false,
        isPrint: true,
        tooltip: 'Textbox',
        thickness: 4,
        value: 'Textbox',
        fontFamily: 'Courier',
        fontSize: 10,
        fontStyle: 'None',
        color: 'black',
        borderColor: 'black',
        backgroundColor: 'White',
        alignment: 'Left',
        maxLength: 0,
        isMultiline: false
      };
    }
  }
};
</script>

View Sample on GitHub

See also