vue打印可编辑文本

「爱情、让人受尽委屈。」 2022-09-12 10:45 226阅读 0赞

### vue打印可编辑文本 ###

**前言**：最近写项目时候遇到一个打印的问题，分享给大家，有遇到这种问题的小伙伴可以参考一下。

**问题描述**：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57-g6IqxMDAx_size_20_color_FFFFFF_t_70_g_se_x_16]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57-g6IqxMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 1]

<div>
              <div class="warning">注意事项：</div>
              // onPrintShow 值默认为false，在点击打印的事件中将值改为true，目的是为了在打印的时候将按钮消失
                <el-button @click="BtnUser" v-if="onPrintShow == false" type="primary" size="small" style="float: right;margin: 10px 0px 6px;">保存注意事项</el-button>
              </div>
              <div class="print_footer">
                <div class="liUser">
                // 在编辑的时候使用这个框
                  <el-input type="textarea" v-if="onPrintShow == false" v-model="textarea" placeholder="请输入内容" autosize>
                  </el-input>
                  // 在点击打印时使用这个框，他们的区别在于在DOM元素里面，input中的值是不在元素内，只有纯文本的才可以被print()，所以这个框使用v-text进行渲染
                  <el-input type="textarea" style="max-width: 400px;padding: 5px 0px;border: 0px;line-height: 1.8;" v-else v-text="textarea" placeholder="请输入内容" autosize>
                  </el-input>
                 </div>
                 <div class="col2">
                   <div class="row">选片签名:</div>
                   <div class="row">看版签名:</div>
                   <div class="row">取件签名:</div>
                 </div>
               </div>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57-g6IqxMDAx_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ca36585e0a2a41e0acec22b8913bc808.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57-g6IqxMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/3fc0f92a2ceb4a23abb1a6bc94f705b9.png