How to Disable Tile Rendering in Vue PDF Viewer

14 Aug 20262 minutes to read

Use the tileRenderingSettings.enableTileRendering property to enable or disable tile rendering, which affects rendering 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>