成都行业网站,怎么看一个网站是不是外包做的,制作小网站,母版做双语网站使用pdfjs-dist预览pdf#xff0c;实现预加载#xff0c;滚动条翻页。pdfjs的版本很重要#xff0c;换了好多版本#xff0c;终于有一个能用的
node 20.18.1
pdfjs-dist: ^2.2.228, vue页面代码如下
templatediv v-loadingloa… 使用pdfjs-dist预览pdf实现预加载滚动条翻页。pdfjs的版本很重要换了好多版本终于有一个能用的
node 20.18.1
pdfjs-dist: ^2.2.228, vue页面代码如下
templatediv v-loadingloadingdiv classfixed-toolbardiv classflex flex-directiondiv classmb4el-button clickonClose() sizeminitypewarning返nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;回/el-button/divdiv classmb4el-button clickswitchViewMode() sizemini typesuccess切换模式/el-button/divdiv classmb4el-button clickscalBig() sizeminitypeprimary放nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;大/el-button/div!-- divel-button classmb4 clickrenderPdf(1) sizemini typeprimary默认/el-button/div --divel-button clickscalSmall() sizeminitypeprimary缩nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;小/el-button/divel-dropdown sizemini triggerclick classmore-dropdown styleline-height: 35px;el-button sizemini typeprimary缩nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;放/el-buttonel-dropdown-menu slotdropdownel-dropdown-itemspan classel-button--text- clickscale 11X/span/el-dropdown-itemel-dropdown-itemspan classel-button--text- clickscale 22X/span/el-dropdown-itemel-dropdown-itemspan classel-button--text- clickscale 33X/span/el-dropdown-item/el-dropdown-menu/el-dropdown/div/div!-- PDF容器 --div refpdfContainer classpdf-container scrollhandleScroll!-- 占位符用于撑开滚动区域 --div :style{ height: totalHeight px }/div!-- 渲染可见页面 --div v-forpage in visiblePages :keypage.pageNumber :refpage-${page.pageNumber} classpage-container:style{ top: getPageTop(page.pageNumber) px }canvas :refcanvas-${page.pageNumber}/canvasdiv v-ifpage.loading classloading-indicator加载中.../div/div/div/div
/templatescript
import pdfjsLib from pdfjs-dist/build/pdf;
import pdfjsWorker from pdfjs-dist/build/pdf.worker.entry;
import { debounce } from lodash;pdfjsLib.GlobalWorkerOptions.workerSrc pdfjsWorker;export default {data() {return {pdfDoc: null,loading: true,totalPages: 0,pageHeights: [],totalHeight: 0,visiblePages: [],scale: 1,baseScale: 1, // 移动端基准缩放比例scrollTop: 0,viewport: null,renderTasks: {},loadedPages: {}, // 新增记录已加载的页面desiredTotal: 5, // 每次加载的页面数量canvasPool: []};},mounted() {const pageSize this.$route.query.pageSizethis.desiredTotal pageSize?pageSize:this.desiredTotalconsole.log(预加载页面数量: --, this.desiredTotal);this.loadPdf(this.pdfUrl);this.debouncedHandleScroll debounce(this.updateVisiblePages, 100);this.debouncedHandleResize debounce(() {this.calculatePageHeights();this.updateVisiblePages();}, 100);window.addEventListener(resize, this.handleResize);},beforeDestroy() {window.removeEventListener(resize, this.handleResize);this.debouncedHandleScroll.cancel();this.debouncedHandleResize.cancel();Object.values(this.renderTasks).forEach((task) task.cancel());},computed: {pdfUrl() {return this.$route.query.pdfUrl;},},watch: {scale(newVal) {this.loadedPages {}this.updateVisiblePages()}},methods: {switchViewMode() {this.$router.replace({name: pagePreviewPdf,query: {pdfUrl: this.pdfUrl}})},onClose() {this.$router.go(-1)},// 放大scalBig() {this.scale this.scale 0.2},// 缩小scalSmall() {if (this.scale 1.2) {this.scale this.scale - 0.2}},async loadPdf(url) {try {const loadingTask pdfjsLib.getDocument(url);this.pdfDoc await loadingTask.promise;this.totalPages this.pdfDoc.numPages;await this.calculatePageHeights();this.updateVisiblePages();this.loading false;} catch (error) {console.error(加载PDF失败:, error);this.loading false;this.$message.error(加载PDF失败: error);}},handleScroll() {this.debouncedHandleScroll();},handleResize() {this.debouncedHandleResize();},async calculatePageHeights() {this.pageHeights [];let page await this.pdfDoc.getPage(1);let viewport page.getViewport({ scale: 1 });this.baseScale this.isMobile ? window.innerWidth / viewport.width : 1for (let i 1; i this.totalPages; i) {const page await this.pdfDoc.getPage(i);const viewport page.getViewport({ scale: this.scale*this.baseScale });this.pageHeights.push(viewport.height);console.log(i, 页面高度, viewport.height, px,页面宽度:, viewport.width, px)}this.totalHeight this.pageHeights.reduce((sum, height) sum height, 0);},getPageTop(pageNumber) {const top this.pageHeights.slice(0, pageNumber - 1).reduce((sum, height) sum height, 0)// console.log(当前显示页面top, top)return top;},updateVisiblePages() {const container this.$refs.pdfContainer;const scrollTop container.scrollTop;const containerHeight container.clientHeight;// 计算初始可见范围let startPage 1;let endPage this.totalPages;let currentHeight 0;// 计算起始页for (let i 0; i this.pageHeights.length; i) {currentHeight this.pageHeights[i];if (currentHeight scrollTop) {startPage i 1;break;}}// 计算结束页currentHeight 0;for (let i 0; i this.pageHeights.length; i) {currentHeight this.pageHeights[i];if (currentHeight scrollTop containerHeight) {endPage i 1;break;}}// 扩展预加载范围总页数不超过10const desiredTotal this.desiredTotal;const visibleCount endPage - startPage 1;let remaining desiredTotal - visibleCount;if (remaining 0) {let preloadBefore Math.floor(remaining / 2);let preloadAfter remaining - preloadBefore;let newStart Math.max(1, startPage - preloadBefore);let newEnd Math.min(this.totalPages, endPage preloadAfter);// 边界调整const addedBefore startPage - newStart;const addedAfter newEnd - endPage;if (addedBefore preloadBefore) {newEnd Math.min(this.totalPages, newEnd (preloadBefore - addedBefore));} else if (addedAfter preloadAfter) {newStart Math.max(1, newStart - (preloadAfter - addedAfter));}startPage newStart;endPage newEnd;// 确保不超过总页数限制if (endPage - startPage 1 desiredTotal) {endPage startPage desiredTotal - 1;if (endPage this.totalPages) endPage this.totalPages;}} else {// 可见页数超过10时调整endPage startPage desiredTotal - 1;if (endPage this.totalPages) {endPage this.totalPages;startPage Math.max(1, endPage - desiredTotal 1);}}// 生成可见页面数组this.visiblePages [];console.log(渲染显示范围, startPage, --- , endPage)const pages []for (let j startPage; j endPage; j) {pages.push(j )}console.log(loadedPages:, JSON.stringify(this.loadedPages))// 移除不在显示区的页面Object.keys(this.loadedPages).filter(k !pages.includes(k)).forEach(pageNumber {this.$delete(this.loadedPages, pageNumber);})console.log(cleaned loadedPages:, JSON.stringify(this.loadedPages))for (let i startPage; i endPage; i) {const isLoaded !!this.loadedPages[i];this.visiblePages.push({pageNumber: i,loading: !isLoaded,});if (!isLoaded) {this.renderPage(i);console.log(渲染, i)} else {console.log(DONE, i)}}},async renderPage(pageNumber) {console.log(loadedPages:, JSON.stringify(this.loadedPages))if (this.loadedPages[pageNumber]) {const index this.visiblePages.findIndex((p) p.pageNumber pageNumber);if (index ! -1) this.$set(this.visiblePages[index], loading, false);return;}if (this.renderTasks[pageNumber]) this.renderTasks[pageNumber].cancel();try {const page await this.pdfDoc.getPage(pageNumber);const canvas this.$refs[canvas-${pageNumber}][0];const context canvas.getContext(2d);const viewport page.getViewport({ scale: this.scale*this.baseScale });canvas.height viewport.height;canvas.width viewport.width;const renderTask page.render({ canvasContext: context, viewport });this.renderTasks[pageNumber] renderTask;await renderTask.promise;this.$set(this.loadedPages, pageNumber, true); // 标记为已加载const index this.visiblePages.findIndex((p) p.pageNumber pageNumber);if (index ! -1) this.$set(this.visiblePages[index], loading, false);} catch (error) {if (error.name ! RenderingCancelledException) console.error(渲染失败:, error);}},},
};
/scriptstyle langscss scoped
.pdf-container {height: 100vh;overflow-y: auto;width: 100%;position: relative;
}.page-container {position: absolute;width: 100%;background: #f5f5f5;margin-bottom: 20px;display: flex;justify-content: center;
}.loading-indicator {text-align: center;padding: 20px;
}.fixed-toolbar {position: fixed;bottom: 50%;right: 0;background-color: white;/* 可选设置背景颜色 */opacity: 0.7;z-index: 1000;/* 确保工具栏在其他内容之上 */padding: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);/* 可选添加阴影效果 */margin-bottom: 10px;flex-wrap: wrap;
}.mb4 {margin-bottom: 4px;
}media screen and (max-width: 768px) {}
/style
