从零开始Vue3+Element Plus后台管理系统(十四)——PDF预览和打印

其实我常常会纠结今天要写什么内容。

因为希望能够保持每日更新，所以要写的内容不能太难——最好是半天可以搞出demo并且输出文章，所以很多东西浅尝辄止，并没有深入研究，还写出了一些bug 🐛

今天又浅浅的研究了下在Vue3中如何预览PDF

vue-pdf-embed

刚开始尝试 vue3-pdfjs，可以很快做出预览界面，但它没有自带打印功能，所以继续在github中翻啊翻。

最终选择了vue-pdf-embed https://github.com/hrynko/vue-pdf-embed#examples，它的功能强大一些，可以满足预览和打印的功能。

npm install vue-pdf-embed

缩放

初始化时获取容器宽度，把组件的width设为容器宽度数值，然后通过调整width的值来控制缩放。

// 设置初始宽度
onMounted(() => {
   
   
  wpWidth = wpRef.value.clientWidth
  width.value = wpWidth
})

function zoom(type: number) {
   
   
  if ((scale.value < 0.3 && type === -1) || (scale.value > 5 && type === 1)) return

  scale.value = scale.value + type * 0.1
  width.value = scale.value * wpWidth
}

打印

调用print()，配置参数

print resolution (number) 分辨率,
filename (string),
all pages flag (boolean)

function print() {
   
   
  pdfRef.value.print(150, null, true)
}

完整代码