图片地址生成二维码、vue-print-nb打印插件

1.下包

npm i qrcode

2.导包

import QrCode from 'qrcode'

3.制作一个弹层

<el-dialog :visible.sync="showCode" title="二维码">
      <!-- 放置el-row主要是为了布局     -->
      <el-row type="flex" justify="center">
        <canvas ref="canvas" />
      </el-row>
    </el-dialog>

4.js代码

<script>
import QrCode from 'qrcode'
export default {
data() {
    return {
    userId: this.$route.params.id, // 直接将路由中的参数赋值给data中的属性
    showCode: false // 控制显示二维码的弹层
    }
},
methods: {
showQrCode(url) {
      // url存在的情况下才弹出层
      if (url) {
        this.showCode = true // 数据更新了，但是弹层不会立刻出现，页面渲染是异步的
        this.$nextTick(() => {
        // 此时可以确定有ref对象了
          QrCode.toCanvas(this.$refs.canvas, url) // 第一个参数是canvas的dom对象，第二个对象是转化成二维码的信息,转换成二维码
          // 如果转化的二维码信息 是一个地址的话，就会跳转到该地址，如果不是地址就会显示内容
        })
      } else {
        this.$message.warning('该用户还未上传头像')
      }
    }
}

打印

1.下包

npm i vue-print-nb

2.注册插件

import Print from 'vue-print-nb'
Vue.use(Print)

3.打印按钮

<el-row type="flex" justify="end">
          <!--    利用 v-print指令完成页面的打印     -->
          <el-button v-print="printObj" size="small" type="primary">打印</el-button>
        </el-row>

4.js

<script>
import { getPersonalDetail, getJobDetail } from '@/api/employees'
import { getUserDetailById } from '@/api/user'
export default {
  data() {
    return {
      printObj: {
        id: 'myPrint' // 打印区域的id，给打印区域起的id名字是myPrint
      },
      formData: {},
      userId: this.$route.params.id,
      type: this.$route.query.type // 打印类型
    }
  },
  // 创建完毕状态
  created() {
    this.type === 'personal' ? this.getPersonalDetail() : this.getJobDetail()
  },
  // 组件更新
  methods: {
    async getPersonalDetail() {
      this.formData = await getPersonalDetail(this.userId) // 获取个人基本信息
    },
    async getJobDetail() {
      const userInfo = await getUserDetailById(this.userId)
      const jobInfo = await getJobDetail(this.userId) // 获取个人基本信息
      this.formData = { ...userInfo, ...jobInfo }
    }
  }
}
</script>