--- theme: nico --- 其实我常常会纠结今天要写什么内容。因为希望能够保持每日更新，所以要写的内容不能太难——最好是半天可以搞出demo并且输出文章，所以很多东西浅尝辄止，并没有深入研究，还写出了一些bug 🐛 今天又浅浅的研究了下在Vue3中如何预览PDF ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b121763e744a4a1ca30d2e4b84fac1a3~tplv-k3u1fbpfcp-watermark.image?) ## vue-pdf-embed 刚开始尝试 [vue3-pdfjs](https://github.com/randolphtellis/vue3-pdfjs)，可以很快做出预览界面，但它没有自带打印功能，所以继续在github中翻啊翻。最终选择了vue-pdf-embed ，它的功能强大一些，可以满足预览和打印的功能。 ```shell npm install vue-pdf-embed ``` ### 缩放初始化时获取容器宽度，把组件的width设为容器宽度数值，然后通过调整width的值来控制缩放。 ```js // 设置初始宽度 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`) ```js function print() { pdfRef.value.print(150, null, true) } ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04fd5f38750a4bdebf8ec921b6fe1f5a~tplv-k3u1fbpfcp-watermark.image?) ### 完整代码 ```html ```