页面分页打印,echarts图解决办法;生成PDF

本文讲述了在使用Vue框架开发时,如何解决Echarts图表在打印时的问题,包括兼容性问题、Base64图片的使用以及如何利用vue-print-nb进行打印,特别提到了手动页断和隐藏内容不会被打印的情况。
摘要由CSDN通过智能技术生成

1:echarts图片前端打印不是很完美,对于VUE2.0版本不是很有好

2:360浏览器不支持vue的最新版本的插件vue3-print-nb

3:vue-print-nb 可以打印带有echarts 一页内容,并且还存在bug,第一次点击打印没有,第二次打印才会出现,并且不会分页,显然是不可以的

解决方案:将echarts弄成base64图片,注意缓存时间,时间太短图片生成不出来;并且打印只能是页面的显示内容,隐藏内容不会被打印出来,所以最好再写一个页面

<Row>
              <Col span="2">
                &nbsp;
              </Col>
              <Col span="20">
                <div class="tableWrap"  style="height: 300px;width: 100%">
                  <div
                      ref="myStacked"
                      id="myStacked"
                      style="height: 300px;width: 100%"
                  ></div>

                </div>
              </Col>
            </Row>

1:注意div标签要给高度,不然echarts显示不出来

  const myStacked = echarts.init(this.$refs.myStacked);
   setTimeout(()=>{
        this.myStackedImg = myStacked.getDataURL({
          type: "jpg",
          pixelRatio: 1, //放大2倍
          backgroundColor: "#fff", // 背景颜色
        });
      },1000)
      
1:getDataURL 是获取base64的图片方法

<Modal v-model="previewsModel" title="报告pdf" :mask-closable="false"
           width="1200"  footer-hide :styles="{top: '100px'}">
      <riskReportPdf2
              style="height: 500px;overflow: auto"
              :myStackedImg="myStackedImg"
              :myPiepagetwoImg="myPiepagetwoImg"
              :myPiePage2Img="myPiePage2Img"
              :myColumnPage4Img="myColumnPage4Img"
              ......
      />
    </Modal>

1:注入vue-print-nb 和 Vue 
 import Print from 'vue-print-nb';
import Vue from 'vue';
Vue.use(Print, {manualPageBreak: true});
<Card class="box-card" :body-style="{ padding: '20px',minHeight: 'calc(100vh - 100px)'}">
	// 打印的标签id regAccountConfirmDiv111
     <div id="regAccountConfirmDiv111" ref="regAccountConfirmDiv111" style="padding: 20px">
     // 分页 page-break-before:always;
     <div style="page-break-before:always;">
       <Row>
          <Col span="24" style="text-align: center;">
             <img :src="myStackedImg" alt="交易数量" style="display: inline-block;border: 1px solid #000000;margin-top: 10px" />
           </Col>
       </Row>
    </div>
  </div>
</Card>

1:注意 <div style="page-break-before:always;"> 是分页的标识

 print() {
     this.$print(this.$refs.regAccountConfirmDiv111);
 },
.......



在这里插入图片描述

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
itextpdf是一个用于创建和操作PDF文档的开源Java库。它提供了丰富的功能和灵活性,可以满足各种生成和编辑PDF文件的需求。 在itextpdf中,生成PDF分页是通过设置页面布局和页面大小实现的。可以使用Rectangle类来创建页面大小,并使用Document类设置页面布局。要分页,可以使用Chunk或Phrase类来添加内容,并使用add()方法将它们添加到文档中。 首先,你需要创建一个Document对象,并使用PdfWriter类将其与PDF文件关联起来。然后,你可以通过设置页面大小和页面边距来调整文档的布局。接下来,你可以使用Font类和Paragraph类来设置内容的样式和格式。 在添加内容时,你可以使用Chunk或Phrase类来创建段落,并使用add()方法将它们添加到文档中。在每个页面的末尾,你可以使用newPage()方法创建新的页面,并在新页面上继续添加内容。 最后,你需要使用close()方法关闭文档,将其保存为PDF文件。 总结起来,itextpdf生成PDF分页的步骤如下: 1. 创建一个Document对象,并与PDF文件关联。 2. 设置页面大小和页面边距。 3. 使用Font类和Paragraph类设置内容的样式和格式。 4. 使用Chunk或Phrase类创建段落,并使用add()方法将它们添加到文档中。 5. 在每个页面的末尾,使用newPage()方法创建新的页面。 6. 使用close()方法关闭文档,将其保存为PDF文件。 希望这些信息对你有帮助。如果你需要更具体的实例或代码示例,可以参考引用提供的资料。<span class="em">1</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值