Disable tile rendering in Vue PDF Viewer

17 Oct 20252 minutes to read

Use the tileRenderingSettings.enableTileRendering property to enable or disable tile rendering, which affects performance based on document size.

Set enableTileRendering to false to disable tile rendering. It is enabled by default and typically benefits large documents.

Example: Disable tile rendering

<template>
  <div>
    <button id="disable" @click="disableTileRendering">Disable tile rendering</button>

    <ejs-pdfviewer
      ref="viewer"
      :serviceUrl="serviceUrl"
      :documentPath="documentPath">
    </ejs-pdfviewer>
  </div>
</template>

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

export default {
  name: 'DisableTileRendering',
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: {
    PdfViewer: [
      Toolbar,
      Magnification,
      Navigation,
      LinkAnnotation,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormDesigner,
      FormFields
    ]
  },
  data() {
    return {
      serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer',
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf'
    };
  },
  methods: {
    disableTileRendering() {
      const viewer = this.$refs.viewer.ej2Instances;
      viewer.tileRenderingSettings.enableTileRendering = false;
    }
  }
};
</script>