前端预览pdf之pdfjs-dist结合better-scroll的使用
发布网友
发布时间：2024-09-27 00:22
共1个回答
热心网友
时间：2024-12-01 18:53
1、下载安装
npm?i?pdfjs-dist?//?使用的版本是?"pdfjs-dist":?"^2.14.305",2、实现的功能
1、在线 pdf 文件的预览
2、支持按钮缩放
3、支持手势缩放
<template><div?class="home_wrap"><div?class="pdf_down">??<div?class="pdf_set_left"?@click="scaleD">放大</div>??<div?class="pdf_set_middle"?@click="scaleX">缩小</div></div><div??:style="{?width:?pdf_div_width,?margin:?'0?auto'?}"??@touchstart="touchstart"??@touchmove="touchmove"??@touchend="touchend">??<canvas????v-for="page?in?pdf_pages"????:id="'the_canvas'?+?page"????:key="page"??></canvas></div></div></template>-?存在的问题????因为是`touchend`之后，重新渲染?pdf文件，所以手势缩放会有卡顿的感觉。解决办法引入`better-scroll`#?二、pdfjs?结合?better-scroll-?1、package.json```json"dependencies":?{????"@better-scroll/core":?"^2.4.2",????"@better-scroll/movable":?"^2.4.2",????"@better-scroll/zoom":?"^2.4.2",????"pdfjs-dist":?"^2.14.305",????"vue":?"^3.2.13"??},2、代码
<template><div?class="home_wrap">??<div?class="pdf_down">????<div?class="pdf_set_left"?@click="scaleD">放大</div>????<div?class="pdf_set_middle"?@click="scaleX">缩小</div>??</div>??<div?class="pdf-parent-container">????<div??????id="pdf-container"??????:style="{?width:?pdf_div_width,?margin:?'0?auto'?}"????>??????<canvas????????v-for="page?in?pdf_pages"????????:id="'the_canvas'?+?page"????????:key="page"??????></canvas>????</div>??</div></div></template>原文：https://juejin.cn/post/7098364436351549447
