Customize the appearance of PDF Form Fields in Vue PDF Viewer

28 Jul 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 of 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