Thư viện @tuttarealstep/vue-pdf.js là một wrapper cho PDF.js trong Vue 3, cho phép nhúng trình xem PDF vào ứng dụng với khả năng tùy chnh thanh công cụ, ngôn ngữ và b sung chức năng mở rộng sau khi tài liệu đã tải.

Cài đặt

npm install @tuttarealstep/vue-pdf.js

Sử dụng cơ bản

Component VuePDFjs nhận đường dẫn tài liệu qua prop source và các tùy chọn hiển thị qua prop options.

<template>
  <div class="pdf-wrapper">
    <VuePDFjs
      ref="pdfRef"
      :source="fileUrl"
      :options="config"
      @pdf-app:loaded="handleReady"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VuePDFjs } from '@tuttarealstep/vue-pdf.js'
import '@tuttarealstep/vue-pdf.js/dist/style.css'
import viFTL from '@tuttarealstep/vue-pdf.js/l10n/vi/viewer.ftl?raw'

const pdfRef = ref()
const fileUrl = ref('/assets/sample-document.pdf')

const config = ref({
  toolbar: {
    options: {
      printButton: false,
      downloadButton: false,
      secondaryDownload: false,
      secondaryOpenFile: false,
      secondaryPrint: false,
      editorSignature: false,
      editorStamp: false,
    }
  },
  locale: {
    code: 'vi',
    ftl: viFTL,
  }
})

function handleReady() {
  pdfRef.value.pdfApp.pdfSidebar.open()
  injectFullscreenBtn()
}
</script>

<style scoped>
.pdf-wrapper {
  width: 100%;
  height: 100%;
}
</style>

Tùy chỉnh thanh công cụ và ngôn ngữ

Phần toolbar.options cho phép ẩn hoặc vô hiệu hóa từng nút trên thanh công cụ. Ví dụ trên vô hiệu hóa in, tải xuống, ký và đóng dấu. Phần locale thiết lập ngôn ngữ giao diện, ở đây là tiếng Việt.

Bổ sung nút toàn màn hình sau khi tải

Sau khi PDF khởi tạo, có thể chèn thêm nút tùy chỉnh vào DOM của trình xem. Đoạn mã sau thêm nút toàn màn hình vào nhóm công cụ chỉnh sửa:

function injectFullscreenBtn() {
  const target = document.getElementById('editorModeButtons')
  if (!target || document.getElementById('customFullScreen')) return

  const wrapper = document.createElement('div')
  wrapper.id = 'customFullScreen'
  wrapper.className = 'toolbarButtonWithContainer'
  wrapper.innerHTML = `
    <button class="toolbarButton" title="Toàn màn hình" aria-label="Toàn màn hình">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
        <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
      </svg>
    </button>
  `

  const button = wrapper.querySelector('button')
  button.addEventListener('click', toggleFullscreen)
  target.appendChild(wrapper)
}

let isFullscreen = false

function toggleFullscreen() {
  const viewer = document.querySelector('.vue-pdfjs')
  const button = document.querySelector('#customFullScreen button')
  if (!viewer || !button) return

  isFullscreen = !isFullscreen

  if (isFullscreen) {
    Object.assign(viewer.style, {
      position: 'fixed',
      inset: '0',
      zIndex: '9999',
      height: '100vh'
    })
    button.title = 'Thoát toàn màn hình'
  } else {
    Object.assign(viewer.style, {
      position: '',
      inset: '',
      zIndex: '',
      height: '800px'
    })
    button.title = 'Toàn màn hình'
  }
}

Việc thực hiện DOM thủ công nên được gói trong hàm xử lý sự kiện pdf-app:loaded để đảm bảo các phần tử của trình xem đã được khởi tạo trước khi chèn nút.