打印网页

最新推荐文章于 2025-07-24 16:05:29 发布

你若精彩_天自安排

最新推荐文章于 2025-07-24 16:05:29 发布

阅读量290

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发备忘篇文章标签：打印网页前端

本文链接：https://blog.youkuaiyun.com/u010556394/article/details/84822473

前端开发同时被 2 个专栏收录

27 篇文章

订阅专栏

备忘篇

12 篇文章

订阅专栏

本文介绍了一种在Vue.js中实现局部网页打印的方法，通过使用iframe元素和其contentWindow.print()方法，可以将页面中特定部分的内容进行打印。文章提供了完整的代码示例，包括如何克隆需要打印的内容并将其插入到iframe中。

记：打印局部网页，借助iframe的print方法

代码如下

<template>
  <div>
    <div id="content">
      <img src="../assets/logo.png">
      <h1>{{ msg }}</h1>
    </div>
    <iframe id="iframe" style="display: none"></iframe>
    <button v-on:click="print">打印</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    print: function () {
      window.document.querySelector('#iframe')['contentWindow'].document.body.innerHTML = '';
      window.document.querySelector('#iframe')['contentWindow'].document.body.appendChild(window.document.querySelector('#content').cloneNode(true));
      window.document.querySelector('#iframe')['contentWindow'].print()
    }
  }
}
</script>

效果如下：