vue打印功能实现

效果图

<div class="printChoose printChoosePrintBox" id="printChoose" ref="imgcanvas">
            <div class="print_header">{{pd.storeName}}-制作单明细</div>
            <template v-if='!isImage'>
               <div class="basic_information">基本资料</div>
                 <div class="basic_information_table">
                <div class="row1">
                    <div class="col">{{userInfo.storeType==0?'姓名/宝宝':'姓名'}}</div>
                    <div class="col">电话</div>
                    <div class="col">订单号</div>
                    <div class="col">套系</div>
                    <div class="col">加挑金额</div>
                    <div class="col">接单人</div>
                    <div class="col">摄影师</div>
                </div>
                <div class="row2">
                    <div class="col" v-if="userInfo.storeType==0">{{pd.customerName}}/{{pd.babyName}}</div>
                    <div class="col" v-else>{{pd.customerName}}</div>
                    <div class="col">{{pd.customerMobile}}</div>
                    <div class="col">{{pd.orderNum}}</div>
                    <div class="col">{{pd.seryName}}</div>
                    <div class="col">{{pd.addPickPrice}}</div>
                    <div class="col">{{pd.clerkName}}</div>
                    <div class="col">{{pd.photographer}}</div>
                </div>
                <div class="row1">
                    <div class="col">{{userInfo.storeType==0?'化妆师/引导师':'化妆师/摄影助理'}}</div>
                    <div class="col">拍摄日期</div>
                    <div class="col">选片师</div>
                    <div class="col">选片日期</div>
                    <div class="col">设计师</div>
                    <div class="col">看版日期</div>
                    <div class="col">取件日期</div>
                </div>
                <div class="row2">
                    <div class="col">{{pd.dresser}}/{{pd.guidance}}</div>
                    <div class="col">{{pd.photographerDate}}</div>
                    <div class="col">{{pd.selectner}}</div>
                    <div class="col">{{pd.selectDate&&pd.selectDate.substr(0,10)}}</div>
                    <div class="col">{{pd.designer}}</div>
                    <div class="col"><span class="text1">{{pd.lookDesignerDate}}</span></div>
                    <div class="col"><span class="text2">{{pd.bookingPickUp}}</span></div>
                </div>
            </div>
            </template>


            <div class="designated_production">
                <div class="col1" style="color:#606266;">指定制作</div>
                <div class="col2">
                    <span class="text1">已选张数：{{pd.selectNum}}</span>
                    <span class="text2">总张数：{{pd.totalNum}}</span>
                </div>
            </div>
            <template v-if="withPicture">
                <div>
                    <div class="designated_production_table" v-for="(item,index) in pd.productImgs" :key="index">
                        <div class="table_header">
                            <div class="col">{{item.productName}}</div>
                            <div class="col">产品规格：{{item.pNumber}}</div>
                            <div class="col">数量：{{item.productNum}}</div>
                            <div class="col">单片：{{item.imgNum}}张</div>
                        </div>
                        <div class="table_body">
                            <div class="item" v-for="(ite,ind) in item.images" :key="ite.imgId">
                                <div class="col1">
                                    <img class="img" :src="ite.offlineThumbnail2||ite.thumbnailUrl2" alt="">
                                    <div class="img_name"><span class="text">{{ite.imgName&&ite.imgName.substr(0,35)}}</span></div>
                                </div>
                                <div class="col2"><span class="text">修片</span></div>
                                <div class="col3"><span class="text"> <span v-if="ite.imgRemark">备注:</span>{{ite.imgRemark}}</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="designated_production_table" key="-1">
                        <div class="table_header">
                            <div class="col">{{'入底'}}</div>
                          <div class="col"></div>
                          <div class="col">数量：{{1}}</div>
                            <div class="col">单片：{{pd.addDiNum}}张</div>
                        </div>
                        <div class="table_body">
                            <div class="item" v-for="(ite,ind) in pd.ruDiImgs" :key="ite.imgId">
                                <div class="col1">
                                    <img class="img" :src="ite.offlineThumbnail2||ite.thumbnailUrl2" alt="">
                                    <div class="img_name"><span class="text">{{ite.imgName&&ite.imgName.substr(0,35)}}</span></div>
                                </div>
                                <div class="col2"><span class="text">修片</span></div>
                                <div class="col3"><span class="text"> <span v-if="ite.imgRemark">备注:</span>{{ite.imgRemark}}</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="designated_production_table" key="-2">
                        <div class="table_header">
                            <div class="col">{{'入册'}}</div>
                          <div class="col"></div>
                          <div class="col">数量：{{1}}</div>
                            <div class="col">单片：{{pd.addCeNum}}张</div>
                        </div>
                        <div class="table_body">
                            <div class="item" v-for="(ite,ind) in pd.ruCeImgs" :key="ite.imgId">
                                <div class="col1">
                                    <img class="img" :src="ite.offlineThumbnail2||ite.thumbnailUrl2" alt="">
                                    <div class="img_name"><span class="text">{{ite.imgName&&ite.imgName.substr(0,35)}}</span></div>
                                </div>
                                <div class="col2"><span class="text">修片</span></div>
                                <div class="col3"><span class="text"> <span v-if="ite.imgRemark">备注:</span>{{ite.imgRemark}}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="product_table">
                    <div class="table_header">
                        <div class="col col1">产品名称</div>
                        <div class="col col1">产品规格</div>
                        <div class="col col2">数量</div>
                        <div class="col col3">所用照片</div>
                    </div>
                    <div class="table_body">
                        <div class="table_body_row" v-for="(item,index) in pd.productImgs" :key="index">
                            <div class="col col1">{{item.productName}}</div>
                            <div class="col col1">产品规格：{{item.pNumber}}</div>
                            <div class="col col2">数量：{{item.productNum}}</div>
                            <div class="col col3">
                                <span v-for="(ite,ind) in item.images" :key="ite.imgId">{{ite.imgName&&ite.imgName.substr(0,35)}}<template v-if="ind!=item.images.length-1">,</template></span>
                                <span class="totalNum">共{{item.images.length}}张</span>
                            </div>
                        </div>
                        <div class="table_body_row" key="rudi">
                            <div class="col col1">入底</div>
                          <div class="col col1"></div>
                          <div class="col col2">数量：{{pd.addDiNum}}</div>
                            <div class="col col3">
                                <span v-for="(ite,ind) in pd.ruDiImgs" :key="ite.imgId">{{ite.imgName&&ite.imgName.substr(0,35)}}<template v-if="ind!=pd.ruDiImgs.length-1">,</template></span>
                                <span class="totalNum">共{{pd.ruDiImgs.length}}张</span>
                            </div>
                        </div>
                        <div class="table_body_row" key="rece">
                            <div class="col col1">入册</div>
                          <div class="col col1"></div>
                          <div class="col col2">数量：{{pd.addCeNum}}</div>
                            <div class="col col3">
                                <span v-for="(itd,ind) in pd.ruCeImgs" :key="itd.imgId">{{itd.imgName&&itd.imgName.substr(0,35)}}<template v-if="ind!=pd.ruCeImgs.length-1">,</template></span>
                                <span class="totalNum">共{{pd.ruCeImgs.length}}张</span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="!isImage">
               <div class="remark remarks" v-if="!withPicture" style="border-bottom:0;display:flex;flex-wrap:wrap">
                调修要求:
                <!-- <div v-for="(item,index) in pd.productImgs" :key="index">
                    <div v-for="(ite,ind) in item.images" :key="ite.imgId">
                        <span v-if="ite.imgRemark" style="margin-right:5px">
                           {{ite.imgName&&ite.imgName.substr(0,35)}}  {{ite.imgRemark}}|
                        </span>

                    </div>
                </div> -->
                <div v-for="(ite,ind) in newArray"  :key="ind">
                   <span style="margin-right:10px" v-if='ind != newArray.length-1'>
                      {{ite.imgName&&ite.imgName.substr(0,35)}}  {{ite.imgRemark}}|
                    </span>
                    <span v-else style="margin-right:10px">
                        {{ite.imgName&&ite.imgName.substr(0,35)}}  {{ite.imgRemark}}
                    </span>
                </div>
                <!-- <div v-for="(ite,ind) in pd.ruCeImgs" :key="ite.imgId">
                        <span v-if="ite.imgRemark" style="margin-right:5px">
                           {{ite.imgName&&ite.imgName.substr(0,35)}}  {{ite.imgRemark}}|
                        </span>
                </div> -->
            </div>
             <div class="remark">
                整体备注:{{pd.remark}}
            </div>
               <div class="customer_info">
                <div class="customer_address">客户地址：<span class="line" v-if="pd.storeCustomer">{{`${pd.storeCustomer.provinceName}${pd.storeCustomer.cityName}${pd.storeCustomer.countryName}${pd.storeCustomer.address}`}}</span></div>
                <div class="customer_email">客户邮箱：<span class="line"></span></div>
            </div>
              <div class="warning">注意事项：</div>
            <div class="print_footer">
              <div style="width: 450px;" contenteditable="true">
                {{textarea}}
              </div>
                <div class="col2">
                    <div class="row">选片签名:</div>
                    <div class="row">看版签名:</div>
                    <div class="row">取件签名:</div>
                </div>
            </div>
            </template>



        </div>

public onPrint() {
        // 打印;
        const newStr = $("#printChoose").prop("outerHTML"); // 获取dom元素
        $("body").html(newStr); 
        this.setPage();
        window.print(); // print() 方法用于打印当前窗口的内容。
        window.location.reload();
    }
public setPage() {
        // 设置分页;
        // 每一页的高度为1047px;
        $(".designated_production_table .table_body .item").each((index, dom) => {
            // console.log($(dom).height());
            // console.dir(dom);
            let domHeight = $(dom).outerHeight(true);
            let domOffset: any = $(dom).offset();
            let domOffsetTop = domOffset.top;
            let sum = domHeight + domOffsetTop;
            if (sum > 1047) {
                if (sum % 1047 < 104) {
                    $(dom).css("marginTop", 1047 - domOffsetTop % 1047);
                    this.setPage();
                }
            }
        })
    }

其中有一个是可编辑的文本

这个功能点的实现是用一个属性支撑的

<div style="width: 450px;" contenteditable="true">
    {{textarea}}
</div>
// contenteditable="true"属性指定元素内容是否可编辑。
// 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。

我对打印功能了解的也不太深刻，这次遇到了这个功能也不想错过学习的机会，就总结了博客，有写的不对的地方望大神们多多指教！

啾咪~