流光年华|VUE 实现高性能的 PDF 在线预览( 四 ) 最近在实现共享PDF文档的需求

判定宽度是否超出可视区域

/** * 获取文档显示高度与缩放比例. * @param documents * @param origin */protected getHeightAndScale(	documents?: HTMLDivElement,	origin?: any): {	height: number;	scale: number;} {	documents = documents ?? this.getContainer() as HTMLDivElement;	let wrapperHeight = 0, lastScale = 0;	if (documents) {const size = this.files.speaker,// 所记录的主讲人的屏幕尺寸width = documents.offsetWidth,// 当前用户显示容器的可视宽度height = documents.offsetHeight;	// 当前用户显示容器的可视高度let originWidth;/** 获取原始文档宽度 */if (!origin) {const pagination = this.getActivePagination();originWidth = pagination.originWidth;} else {originWidth = origin[2];}/*** 计算主讲人的缩放比.* 往下出现的 200 / 150 之类的常数, 为设定好的显示偏移量.*/const speakerRatio = Math.round((size.width - 200) / originWidth * 100) / 100;/** 非主讲人默认以高度为基准来计算文档显示的缩放比例 */lastScale = Math.round(speakerRatio / (size.height - 150) * (height - 100) * 100) / 100;/** 如果以高度为基准的情况下, 判定宽度是否超出可视区域 */const destWidth = Math.round(originWidth * lastScale * 100) / 100,offsetWidth = width - (this.isSpeaker() ? 200 : 120),diffWidth = destWidth - offsetWidth;if (diffWidth > 0) {/*** 如果超出可视区域, 重新设定缩放比,* 文档内容显示所在的DIV容器, 将进一步缩小,* 以保证宽度在正常的可视区域内*/wrapperHeight = (Math.round((offsetWidth * (size.height - 150)) / (size.width - 200) * 100) / 100);lastScale = Math.round(offsetWidth / originWidth * 100) / 100;}	}	return {height: wrapperHeight,scale: lastScale	};}

总结翻页控制的代码我就不贴出来了，与请求分片中的判定类似。总的实现，没有太大的难点，理清思路之后就很好实现了，上传速度快慢先不说，秒传校验通过的情况下，基本在 16ms 内完成 Content Download ，直至页面渲染出来，整个过程大概 1s 左右，有个前提是我的实现是等 5 个分页都渲染完成后又进行了一系列的涂鸦初始化操作后的时间，不做其它处理，只做展示，速度将会更快。