window.print()方法调起浏览器打印

最新推荐文章于 2024-10-31 15:50:03 发布

原创

最新推荐文章于 2024-10-31 15:50:03 发布 · 605 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

该博客介绍了如何在Vue.js中创建一个包含表格数据的组件，并实现点击按钮打印表格内容的功能。代码示例展示了如何设置表格样式、响应式布局以及使用两种不同的打印方法。同时，博客还提供了数据结构和CSS样式来确保表格的显示效果。

 
<template>
  <div><button @click="del">打印</button></div>
  <div ref="printHtml">
    <div class="wraper">
      <div>
        <table border="1px" cellspacing="0">
          <thead>
            <tr>
              <th rowspan="2">1</th>
              <th rowspan="2">2</th>
              <th rowspan="2">3</th>
              <th rowspan="2">4</th>
              <th rowspan="2">5</th>
              <th rowspan="2">6</th>
              <th rowspan="2">7</th>
              <th rowspan="2">8</th>
              <th rowspan="2">9</th>
              <th rowspan="2">0</th>
              <th rowspan="2">11</th>
              <th rowspan="2">12</th>
              <th rowspan="2">13</th>
              <th rowspan="2">14</th>
              <th rowspan="2"&