vue-print-nb说明,如何vue使用print打印图片
这篇文章主要介绍了某视频剪辑软件中的vue-打印-nb如何实现页面打印，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
安装在主页。射流研究…中全局引入页面中使用
安装
新公共管理安装vue-打印-注意-保存
在main.js中全局引入
从" vue-print-nb "导入打印
Vue.use(打印);
页面中使用
备注：只会打印id=printMe内的网页
模板
div class=table
div class=tableList
div id=printMe
div class=title 打印模板/div
div class=内容-表格-三
div class= table-name-three xxxx/div
div class= table-info-three { list。from name } }/div
div class= table-name-three xxxx/div
div class= table-info-three { list。来自身份证} }/div
div class= table-name-three xxxx/div
div class= table-info-three { list。来自电话} }/div
/div
div class=内容-表格-三
div class= table-name-three xxxx/div
div class= table-info-three { list。from name } }/div
div class= table-name-three xxxx/div
div class= table-info-three { list。来自身份证} }/div
div class= table-name-three xxxx/div
div class= table-info-three { list。来自电话} }/div
/div
div class=内容-表格-二
表名二 XXXX/div
div class= table-info-two { list。原因} }/div
表名二 XXXX/div
div class= table-info-two { list。原因} }/div
/div
div class=内容-表格-一
表名一 XXXX/div
div class= table-info-one { list。原因} }/div
/div
div class=内容-表格-一
表名一 XXXX/div
div class= table-info-one { list。原因} }/div
/div
div class=内容-表格-img
表名一 XXXX/div
div class=table-info-img
div class=imgsrc
图片
v-if=list.img
:src=list.img
/
/div
/div
/div
div class=内容-表格-img
表名一 XXXX/div
div class=table-info-img
div class=imgsrc
图片
v-if=list.img
:src=list.img
/
/div
/div
/div
/div
div class=table-btn
按钮类型= info v-print= print obj class= BTN-不打印/按钮
/div
/div
/div
/模板
脚本
导出默认值{
名称：打印信息，
data() {
返回{
列表：[],
printObj: {
id:"打印我",
popTitle:打印模板，
额外头： meta http-equiv= Content-Language Content= zh-cn /，
},
};
},
方法：{},
已计算：{},
已创建(){ },
};
/脚本
样式范围。表格{
宽度：100%;
身高：100vh
溢出-y:滚动；
}。表格列表{
宽度：900像素
边距：自动；
边距-顶部：20px
}。标题{
字体大小：20px
宽度：100%;
文本对齐：居中；
}。表名三，表格信息三{
边框：0.55像素纯色；
宽度：16.7%;
}。表名二，表格信息二{
边框：0.55像素纯色；
宽度：25%;
行高：100像素
文本对齐：居中；
}。表格-信息-图像{
边框：0.55像素纯色；
宽度：75%;
}。表格信息一{
边框：0.55像素纯色；
宽度：75%;
}。表名一{
边框：0.55像素纯色；
宽度：25%;
}。内容表一，内容表二，内容-表-三{
显示器：flex
高度：100像素
宽度：100%;
行高：100像素
文本对齐：居中；
}。内容-表格-img {
显示器：flex
高度：100像素
宽度：100%;
行高：100像素
文本对齐：居中；
}
img {
最大宽度：100%;
身高：100%;
背景尺寸：100%;
背景-重复：不重复；
}。imgsrc {
宽度：90%;
边距：自动；
身高：90%;
边距-顶部：5px
}。表-btn {
边距-顶部：20px
显示器：flex
对齐-内容：空间-均匀；
对齐-项目：居中；
对齐内容：居中；
}
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。