if时光重来 2022-05-25 11:29 采纳率: 50%
浏览 701

使用vue-print-nb插件打印多个图片时,如何让每张图片大小占满整个纸张

使用vue-print-nb插件打印多张图片,如何使每张图片占满整个纸张
代码如下:


<template>
<el-button type="success" v-print="'#printMe'" :loading="printBtn_loading" >点击打印</el-button>
<div style="display:none !important;">
  <div  id="printMe">
    <div style="width:100%;min-height:1000px;padding:10px 0;page-break-after:always;position: relative;">
       <div class="imgbox">
                  <img :src="img_url" alt="">
            </div>
    </div>
    <div style="width:100%;min-height:1000px;padding:10px 0;page-break-after:always;position: relative;">
       <div class="imgbox">
                  <img :src="img_url2" alt="">
            </div>
    </div>
  </div>
</div>
</template>
<style scoped>
  .imgbox{
    text-align:center;
    width: 100%;
    height: 270mm;
}
.imgbox img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 275mm;
    display: block;
}
</style>

img

img

  • 写回答

1条回答 默认 最新

  • 你好!机器人 2022-05-25 14:03
    关注

    img{width:100%;height:100%}

    评论

报告相同问题?

问题事件

  • 创建了问题 5月25日