vue分页功能,vue获取数据并分页
这篇文章主要为大家详细介绍了某视频剪辑软件实现页面打印自动分页的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现页面打印自动分页的具体代码，供大家参考，具体内容如下
一、通过ref方式获取元素进行打印
1.封装一个射流研究…文件
//打印类属性、方法定义
/* eslint-disable */
const Print=function (dom，options) {
如果(!(这是印刷品的例子)返回新的打印(dom，选项)；
this.options=this.extend({
noPrint : .不打印
},选项);
如果((DOM的类型)==== string ){
这个。DOM=文档。查询选择器(DOM)；
}否则{
这是数字正射影像图
this.dom=this.isDOM(dom)？唐：唐10.95美元埃尔
}
这个。init()；
};
Print.prototype={
初始化：函数(){
var内容=这个。get style()this。获取html()；
this.writeIframe(内容);
},
扩展：函数(obj，obj2) {
对于(对象2中的变量k){
obj[k]=obj 2[k]；
}
返回目标文件
},
getStyle: function () {
var str= ，
样式=文档。查询选择器all(样式，链接)；
for(var I=0；I style . length I){
str=styles[i].outerHTML
}
str= style (这个。选项。没有指纹？this.options.noPrint:“.无打印)")"{显示：无；}/style ；
str=stylehtml，body，div{height: auto！重要；font-size:12px }/style ；
返回字符串；
},
getHtml: function () {
var输入=文档。查询选择器all(“input”)；
var textareas=document。查询选择器all(“textarea”)；
var select=文档。查询选择器all(“select”)；
for(var k=0；k个输入。长度；k ) {
如果(输入[k]的缩写.type==checkbox inputs[k].type==radio) {
如果(输入[k]的缩写.checked==true) {
输入[k]的缩写.setAttribute(checked ， checked )
}否则{
输入[k]的缩写.移除属性(“选中”)
}
} else if(输入[k]的缩写.type==text) {
输入[k]的缩写.setAttribute(value ，inputs[k].值)
}否则{
输入[k]的缩写.setAttribute(value ，inputs[k].值)
}
}
for(var k2=0；k2 textareas.lengthk2 ) {
if (textareas[k2].type==textarea) {
文本区域[k2].innerHTML=textareas[k2].价值
}
}
for(var k3=0；k3选择。长度；k3 ) {
如果(选择[k3].type==select-one) {
var子级=选择[k3].儿童；
for (var i in child) {
如果(子[我]。tagName==OPTION) {
如果(子[我]。selected==true) {
孩子[我]。setAttribute(selected ， selected )
}否则{
孩子[我]。移除属性(“选定”)
}
}
}
}
}
返回这个。多姆。外层html
//包裹要打印的元素
//修复：https://github . com/xyl 66/vue plugs _ print js/issues/36
//让外层html=this。wrapperrefdom(这个。DOM).outerHTML
//返回outerHTML
},
//向父级元素循环，包裹当前需要打印的元素
//防止根级别开头的钢性铸铁选择器不生效
wrapperRefDom:函数(引用对象){
让prevDom=null
let currDom=refDom
//判断当前元素是否在身体中，不在文档中则直接返回该节点
如果(!这个。is body(currDom))返回货币
while (currDom) {
if (prevDom) {
let element=curr DOM。克隆节点(假)
element.appendChild(prevDom)
prevDom=元素
}否则{
prevDom=currDom.cloneNode(true)
}
currDom=currDom.parentElement
}
返回prevDom
},
writeIframe:函数（内容){
var w，doc，iframe=document。createelement(“iframe”)，
f=文件。身体。appendchild(iframe)；
iframe.id= myIframe
//iframe。style= position:absolute；宽度：0;高度：0;top:-10px；左：-10px；；
iframe.setAttribute(style ， position:absolute；宽度：0;高度：0;top:-10px；左：-10px；);
w=f . content窗口 f . content文档；
doc=f . content文档 f . content窗口。文档；
医生。open()；
文档写入(内容);
医生。close()；
var _this=this
iframe.onload=function(){
_这个。打印(w)；
setTimeout(function () {
文档。身体。移除子级(iframe)
}, 100)
}
},
toPrint:函数（框架窗口){
尝试{
setTimeout(function () {
框架窗口。焦点()；
尝试{
如果(!框架窗口。文档。exec命令( print ，false，null)) {
框架窗口。print()；
}
} catch (e) {
框架窗口。print()；
}
框架窗口。close()；
}, 10);
} catch (err) {
console.log(err ，err)；
}
},
//检查一个元素是否是身体元素的后代元素且非身体元素本身
isInBody:函数（节点){
return (node===document.body)？false : document.body.contains(节点);
},
isDOM:(html元素的类型=== object )？
函数（对象){
返回接口的目标文件实例；
} :
函数（对象){
返回obj=== object obj的obj类型。nodetype===1 obj的类型。nodename=== string
}
};
const MyPlugin={}
MyPlugin.install=function (Vue，options) {
//4.添加实例方法
Vue.prototype.$printPage=Print
}
导出默认我的插件
2.把文件放在项目里面的某一个文件夹
3.在主页。射流研究…里面全局引用
4.页面使用
备注：不需要打印的内容直接设置班级为不打印即可
二、使用浏览器自带的window.print()方法获取html内容进行打印
缺点：样式只能写在标签上面，否则不生效
1.封装一个射流研究…文件
导出默认函数printHtml(html) {
let style=get style()；
let container=get container(html)；
文档。身体。appendchild(style)；
document.body.appendChild(容器);
getLoadPromise(容器)。然后(()={
window.print()。
文档。身体。移除子对象(样式)；
document.body.removeChild(容器);
});
}
//设置打印样式
函数getStyle() {
let style content=`# print-container {
显示：无；
}
@媒体印刷{
正文：不是(。打印容器){
显示：无；
}
html，
正文{
边距：0 0.2厘米
显示：屏蔽！重要；
高度：自动；
}
#打印容器{
显示：块；
}
@page {
边距：0.25cm 0；
}
}`;
让style=document。createelement( style )；
style.innerHTML=styleContent
回归风格；
}
//清空打印内容
函数cleanPrint() {
让div=document。getelementbyid(打印容器)
如果(!div) {
document.querySelector(body ).移除孩子(分区)
}
}
//新建多姆，将需要打印的内容填充到数字正射影像图
函数getContainer(html) {
cleanPrint()
让容器=文档。createelement( div )；
container.setAttribute(id ， print-container )；
container.innerHTML=html
返回容器；
}
//图片完全加载后再调用打印方法
函数getLoadPromise(dom) {
设imgs=DOM。查询selector all( img )；
imgs=[]。切片。通话(imgs)；
if (imgs.length===0) {
回报承诺。resolve()；
}
设完成计数=0；
返回新承诺(resolve={
功能检查(){
完成计数；
if(已完成计数===imgs。长度){
resolve()；
}
}
imgs.forEach(img={
img.addEventListener(load ，check)；
img.addEventListener(error ，check)；
})
});
}
2.把文件放在项目里面的某一个文件夹
3.页面直接引入
4.页面使用
备注：不需要打印的内容直接在标签上设置样式显示：无；即可
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。