vue项目纯前端实现的“模板打印“功能

下载一个插件 npm i vue-print-nb --save

在main中引入 import Print from “vue-print-nb”

                       Vue.use(Print);

在postcss.config.js里面展示这个数据样式，如果你的项目中没有这个文件

那就下载一个插件"npm i postcss-px-to-view --save-dev";

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 1920, //  视窗的宽度，对应的是我们设计稿的宽度，移动端一般是750，如果是pc端那就是类似1920这样的尺寸
      // viewportHeight: 1344, // 视窗的高度，移动端一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.nocalssvw'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      exclude: [/printPersone/],
      // propList:["*", "!font-size"],//能转化为vw的属性列表
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    }
  }
};

创建一个和“selectorBlackList”里面名字一样的vue，如上：printPersone.vue

父组件    
<template>
    <div>
        <el-dialog title="表" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <el-button type="primary" plain style="margin-bottom:5px;" @click="handlePrint">打印</el-button>
            <el-row>
                <el-col :span="12">
                    <div>
                        <table border="1" class="tableOne" v-for="(item, index) in dataList" :key="index">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <td>张三</td>
                                    <th>性别</th>
                                    <td>男</td>
                                    <th>出生年月</th>
                                    <td>1985.5.10</td>
                                    <td rowspan="4" style="width: 130px;"></td>
                                </tr>
                                <tr>
                                    <th>民族</th>
                                    <td>汉</td>
                                    <th>籍贯</th>
                                    <td>汉</td>
                                    <th>出生地</th>
                                    <td>山东</td>
                                </tr>
                            </thead>
                        </table>

                    </div>
                </el-col>
            </el-row>
            <!-- 引用那个打印的模板 -->
            <print-person ref="myPrintPerson" :list="dataList" />

        </el-dialog>
    </div>
</template>
  
<script>
import PrintPerson from './components/printPersone.vue'
export default {
    components: {
        PrintPerson,
    },
    data() {
        return {
            dialogVisible: false,
            dataList: [],
        };
    },
    created() {

    },
    methods: {
        init(dataList) {
            this.dialogVisible = true;
            this.dataList = dataList;
            this.getList();
        },
        handleClose(done) {
            done();
        },

        // 打印按钮的事件
        handlePrint() {
            let refPrint = this.$refs['myPrintPerson']
            refPrint && refPrint.print()
        },
    }
};
</script>

打印的模板

打印的模板组件
<template>
    <div>
      <button ref="printbtn" class="myprintbtn" v-print="'#myprintDom'"></button>
      <div id="myprintDom" class="nocalssvw">
        <div class="print-warp" style="page-break-before:always;" v-for="(item, ix) in list" :key="ix">
          <table border="1" class="primt-table print-tableOne">
            <thead>
              <tr>
                <td style="width: 68px;" class="pt">姓名</td>
                <td style="width: 58px;">张三</td>
                <td style="width: 68px;" class="pt">性别</td>
                <td style="width: 68px;" class="ptw84">男</td>
                <td style="width: 68px;" class="pt">出生年月</td>
                <td style="width: 68px;">1987.5.10</td>
                <td rowspan="4" colspan="2" style="width: 120px;"></td>
              </tr>
              <tr>
                <td class="pt">民族</td>
                <td>汉</td>
                <td class="pt">籍贯</td>
                <td>汉</td>
                <td class="pt">出生地</td>
                <td>山东</td>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </template>
    
  <script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => [],
        required: true,
      },
    },
    data() {
      return {
        myPrint: {
          id: 'myprintDom',
          extarCss: ''
        }
      }
    },
    methods: {
      print() {
        this.$refs['printbtn'].click();
      }
    },
  }
  </script>