详细介绍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

  

<script>
  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])
      }
    }
  }
</script>

七、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)
    })
  })
})