页面分页打印，echarts图解决办法；生成PDF

大腿不要的腿毛

于 2024-04-23 11:26:47 发布

阅读量537

点赞数 2

文章标签： echarts pdf 前端

本文链接：https://blog.csdn.net/qihangVIP4/article/details/138117125

版权

本文讲述了在使用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);
 },
.......