在vue中使用printJS进行多页打印

在vue中使用printJS进行多页打印

作者: 花影_62b4 | 来源:发表于2020-06-29 17:26 被阅读0次

print.vue

<template>

<div>

<Button type="primary" @click="printHtmlCss">打印</Button>

<div id="printBox">

<div style="page-break-after:always;">

<table contenteditable="true" class="tableBox" style="width:100%">

<caption>千佛山医院汇总表</caption>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>千佛山医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

</table>

</div>

<div style="page-break-after:always;">

<table contenteditable="true" class="tableBox" style="width:100%">

<caption>齐鲁医院汇总表</caption>

<tr height="40">

<td width="25%">名称</td>

<td width="25%">齐鲁医院</td>

<td width="25%">所属网格</td>

<td width="25%">第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

<tr height="40">

<td>名称</td>

<td>齐鲁医院</td>

<td>所属网格</td>

<td>第五网格</td>

</tr>

<tr height="40">

<td>网格长</td>

<td>刘*</td>

<td>联系方式</td>

<td>155****3332</td>

</tr>

<tr height="40">

<td>网格员</td>

<td>张*民</td>

<td>联系方式</td>

<td>135****8360</td>

</tr>

</table>

</div>

<div style="page-break-after:always;">

<div style='height:30px;width:100%'></div>

</div>

<div style="page-break-after:always;" contenteditable="true" >

<img src="./../../assets/images/talkingdata.png" alt="" width='100%' height='400px'>

</div>

</div>

</div>

</template>

<script>

import printJS from "print-js";

import css from "./printCss.js";

export default {

name: "maps",

methods: {

printHtmlCss() {

const style = css; //直接写样式

printJS({

printable: "printBox",

type: "html",

style,

// css: [

// "./map.css"

// ], //引入css文件

scanStyles: false

});

}

}

};

</script>

<style lang="less" scoped>

.tableBox {

border-collapse: collapse;

margin-bottom: 20px;

caption {

font-size: 18px;

font-weight: bold;

margin-bottom: 10px;

}

td {

border: 1px solid #333;

width: 120px;

text-align: center;

}

}

</style>

在printCss.js这里面进行样式的设置，试过其他的方式，样式不生效

let css=

`@media print{

#printBox{

width: 100%;

margin: 0 auto;

}

.tableBox {border-collapse: collapse;width:100%;}

caption{

font-size:18px;

font-weight:bold;

margin-bottom:20px

}

.tableBox tr{width:100%}

.tableBox td {

border: 1px solid #333;

width: 25%;

text-align: center;

whitespace:wrap

}

}`

export default css;

相关文章

网友评论

本文标题：在vue中使用printJS进行多页打印

本文链接：https://www.haomeiwen.com/subject/jnwvqqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

栏目导航

热点阅读

关于我们|服务条款|联系我们|在vue中使用printJS进行多页打印|投稿指南|网站地图|RSS订阅|排版工具|手机版

提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网版权所有

备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！