vue打印功能实现

小灰灰 2022-09-04 07:56 203阅读 0赞

### vue打印功能实现 ###

*   *   *  效果图
     *  其中有一个是可编辑的文本

### 效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX0ZldmVy_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX0ZldmVy_size_16_color_FFFFFF_t_70 1]

<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="(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>
                 <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 属性时，元素将从父元素继承。

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

啾咪~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX0ZldmVy_size_16_color_FFFFFF_t_70]: /images/20220829/af2571a56a684c39ba3bec06cd9a8bd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX0ZldmVy_size_16_color_FFFFFF_t_70 1]: /images/20220829/e16af1cd32f945fe8c99a724246a3b61.png