詳細介紹vuepdf插件

一、vuepdf插件打印字體變小

在使用vuepdf插件對文件進行打印時，有時候會發現打印出來的字體變得很小，這是因為在引入PDF.js庫時，該庫默認會將canvas的dip值設置為96，而在有些設備上，dip值可能會不同，因此會導致打印字體的大小產生變化。為了解決這個問題，我們需要手動設置canvas的dip值，代碼如下：

//設置canvas dpi
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcdn.net/ajax/libs/pdf.js/2.8.335/pdf.worker.min.js'
pdfjsLib.GlobalWorkerOptions.workerPort = 80
pdfjsLib.globalOptions.resetDpi = true
pdfjsLib.globalOptions.set('dpi', window.devicePixelRatio * 96)

二、vuepdf插件顯示空白表格

在渲染帶有表格的pdf文件時，有時候會出現表格完全空白的情況，這是因為PDF.js庫默認是開啟圖像渲染的，而表格這種純文本而已的內容在圖像的處理方式下可能會出現偏差，導致不顯示。解決方法是關閉圖像渲染，改用一種更加準確的方式來渲染pdf，代碼如下：

//關閉圖像渲染
const loadingTask = pdfjsLib.getDocument({url: pdfUrl, disableImageDecoding: true})

三、vueckplayer插件

vuepdf插件是基於PDF.js庫來實現的，PDF.js庫還可以應用於其他方面。與視頻播放器Vueckplayer結合使用，可以實現在線預覽pdf文件並且支持查看原文檔，代碼如下：

//引用Vueckplayer組件
import Vueckplayer from 'vue-ckplayer'
import PdfViewer from './PdfViewer.vue'

export default {
  components: {
    Vueckplayer,
    PdfViewer
  },
  data () {
    return {
      url: 'http://localhost:8080/pdfjs-2.8.335-dist/web/index.pdf'
    }
  },
  methods: {
    //視頻播放器選擇預覽
    viewer() {
      this.$refs.PdfViewer.OpenPdfViewer()
    }
  }
}

四、vuepdf下載

通過vuepdf插件，我們可以輕鬆實現pdf文件下載的功能，代碼如下：

//下載pdf文件
pdf.getPage(1).then((page) => {
  const canvas = document.createElement('canvas')
  canvas.width = page.view[2]
  canvas.height = page.view[3]
  const ctx = canvas.getContext('2d')
  const renderContext = {
    canvasContext: ctx,
    viewport: page.view,
  }
  const renderTask = page.render(renderContext)
  renderTask.promise.then(function () {
    const a = document.createElement('a')
    a.href = canvas.toDataURL('image/jpeg', 1.0)
    a.download = 'test.pdf'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  })
})

五、vuepdf添加批註

vuepdf插件還支持在pdf頁面上添加批註，幫助用戶更好地交流與分享，代碼如下：

//添加批註
pdfViewer.currentScaleValue = 'page-width'
pdfViewer.currentScaleValue = 'page-fit'
pdfViewer.currentScaleValue = '0.5'

const webViewerContainer = document.getElementById('viewerContainer')
const canvas = document.createElement('canvas')
const mainContainer = document.getElementById('mainContainer')

canvas.width = webViewerContainer.clientWidth
canvas.height = webViewerContainer.clientHeight

const ctx = canvas.getContext('2d')
ctx.drawImage(webViewerContainer.querySelector('.page:first-child canvas'), 0, 0)

const imgData = canvas.toDataURL('image/png')

const annotationLayerDiv = document.createElement('div')
annotationLayerDiv.className = 'annotationLayer'
annotationLayerDiv.style.marginLeft = mainContainer.scrollLeft + 'px'
annotationLayerDiv.style.marginTop = mainContainer.scrollTop + 'px'

const img = new Image()

img.onload = function () {
  annotationLayerDiv.appendChild(img)
  mainContainer.appendChild(annotationLayerDiv)
}

img.src = imgData

六、vuepdf預覽

vuepdf插件可以幫助我們完成基本的pdf預覽功能，代碼如下：

//預覽pdf

  



  import pdfViewer from './components/PdfViewer.vue'

  export default {
    components: {
      pdfViewer
    },
    data () {
      return {
        url: ''
      }
    },
    methods: {
      //選擇預覽的pdf文件
      onFileChange(event) {
        this.url = URL.createObjectURL(event.target.files[0])
      }
    }
  }

七、vuepdf跨域

在異步請求獲取pdf文件時，有可能會出現跨域問題，導致請求失敗。通過配置PDF.js的options，我們可以輕鬆解決跨域問題，代碼如下：

//跨域請求pdf文件
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcdn.net/ajax/libs/pdf.js/2.8.335/pdf.worker.min.js'
pdfjsLib.enableRangeRequest = true
pdfjsLib.GlobalWorkerOptions.workerPort = 80

pdfjsLib.getDocument({
  'url': 'http://localhost/test.pdf',
  'rangeChunkSize': 65535,
  'withCredentials': false,
  'httpHeaders': {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
  },
}).promise.then(function (pdf) {
  // 加載完成處理pdf
})

八、vuepdf顯示不全

有時候，在應用vuepdf插件時，我們可能會發現pdf文件無法完整顯示，這有可能是因為我們需要手動設置pdf頁面大小，代碼如下：

//手動設置pdf頁面大小
pdf.getPage(1).then((page) => {
  const scale = 1.5
  const viewport = page.getViewport({
    scale: scale
  })

  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  canvas.height = viewport.height
  canvas.width = viewport.width

  const renderContext = {
    canvasContext: context,
    viewport: viewport
  }

  const renderTask = page.render(renderContext)
  renderTask.promise.then(() => {
    canvas.toBlob(function (blob) {
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.setAttribute('href', url)
      a.setAttribute('download', 'test.pdf')
      a.setAttribute('target', '_blank')
      a.click()
      URL.revokeObjectURL(url)
    })
  })
})