首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue使用v-print打印出现空白页

Vue中使用v-print打印出现空白页问题及解决

2023-09-21 14:26:23 作者：JonTang

这篇文章主要介绍了Vue中使用v-print打印出现空白页问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue使用v-print打印出现空白页

最近做项目时遇到打印出现空白页的问题，查阅资料后找到解决办法，方便同行们快速解决问题。

1.解决办法

在css中加入 "body{ height:auto; }" 即可解决问题。

更新~

第一种办法虽然能够解决问题，但是会修改整个页面的body，会影响到所有的页面，方法不可取，所以这里给出第二个解决办法。

2.解决办法

删掉需要打印的内容中最上面的<div>样式中的"margin-top:xxx"即可解决问题。

Vue v-print打印文件

下载安装插件

npm install vue-print-nb --save

引入注册

在app.js或main.js中引入

    //打印文件
    import Print from 'vue-print-nb'
    Vue.use(Print)

使用

HTML 部分

    <div id="single-info">
        <el-form  label-width="160px">
           <el-row align="center" style="margin-top:30px;">
                <el-col :span="24" align="center">
                   <el-button id="info-btn" v-print="'#single-info'"  @click="prints">打印</el-button>
               </el-col>
           </el-row>
       </el-form>
    </div>

JS 部分

            prints(){
              var prints = document.getElementById('single-info');
              prints.title = "打印的标题";
             }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。