5. 测试滚动翻页功能确保正常工作 你可以通过在浏览器中打开你的Vue应用,并滚动PDF文档来测试滚动翻页功能。确保在滚动到底部时,页面能够正确翻页,并且没有出现错误或异常。 通过以上步骤,你应该能够在Vue项目中成功实现vue-pdf的滚动翻页功能。
numPages; }); }); // 更新当前页 const itemClcik = (index: number) => { emits('update:activePage', index + 1); }; .pdf-view-list { width: 183px; height: 100%; background-color: #333333; overflow-y: scroll; // 隐藏滚动条 &::-webkit-scrollbar { display: none; } .item...
} &::-webkit-scrollbar-thumb { background-color: #696969; /* 滚动条滑块颜色 */ border-radius: 1px; /* 滚动条滑块圆角 */ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* 滚动条滑块阴影 */ } .vue-pdf-embed{ width: 100%; height: 100%; z-index: 1!important; } } } ...
exportconst getPdf = (id, title) => { // 特别重要:当页面超过一页,出现滚动条,滚动的部分生成的图片为空白 window.pageYoffset = 0 document.documentElement.scrollTop = 0 document.body.scrollTop = 0 leturl = html2Canvas(document.querySelector(id)).then(function(canvas) { varcontentWidth = ...
所以先将滚动条置顶constA4_WIDTH=592.28;constA4_HEIGHT=841.89;letimageWrapper=document.querySelector(".div")// 获取DOMletpageHeight=imageWrapper.scrollWidth/A4_WIDTH*A4_HEIGHT;letlableListID=imageWrapper.querySelectorAll("p");// 进行分割操作,当dom内容已超出a4的高度,则将该dom前插入一个空dom,...
当表格列数过多,表格内部产生滚动条,直接导出的话滚动条外是被截掉的,其实不管是表格还是其他组件,内部产生滚动条都是会被截掉的。 解决方案 1: 尽量不要产生内部滚动条,如果避免不了,那么可以考虑导出时候将样式更改,把宽度加大到不出现滚动条,同时可以考虑将页面方向换成横向,不然可能在 pdf 中字看起来过小。
监听pdf滚动,scrollTop滚动条高度,currentNum当前页码 backTop Function 监听回到顶部按钮的点击事件回调 zoomEnable Function(flag) 监听允许缩放,flag:true,false scrollEnable Function(flag) 监听允许滚动,flag:true,false show Function 监听pdfh5显示 hide
let win_out = window.innerWidth; // 获得当前窗口的宽度(包含滚动条) if(win_out>win_in){ // abs = (win_o - win_i)/2; // 获得滚动条长度的一半 abs = (win_out - win_in)/2; // 获得滚动条宽度的一半 // console.log(a, '新abs'); ...
添加watch方法,监听数据变量的变化,动态添加滚动条,一开始我代码如下: watch: { chatlog() { var container = this.$el.querySelector("#chatContainer"); console.log(container); container.scrollTop = container.scrollHeight; } } 但是发现滚动条都是滚动到倒数第二条数据上,所以需要如下代码来解决: watch...
Vue.prototype.getPdf=function(nodeName, fileName, scale, style) {//导出之前先将滚动条置顶,不然会出现数据不全的现象window.pageYOffset = 0; document.documentElement.scrollTop= 0document.body.scrollTop= 0//loading提示信息this.$Message.config({top:500});vardownloadPdfMsg =this.$Message.loading(...