Vue.js 生成自定义纸张：添加二维码、条形码和文字

以下是一个简单的实现示例：

首先，需要引入 Vue 和相关的库（如 qrcode.js 和 jsbarcode）：

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jsbarcode/dist/JsBarcode.all.min.js'></script>

在 HTML 中添加一个输入框和一个按钮，用于生成纸张：

<div id='app'>
  <label for='width'>宽度：</label>
  <input type='number' id='width' v-model='width'>
  <label for='height'>高度：</label>
  <input type='number' id='height' v-model='height'>
  <button @click='generate'>生成纸张</button>
</div>

在 Vue 实例中定义 width 和 height 数据，并编写 generate 方法，用于生成纸张：

new Vue({
  el: '#app',
  data: {
    width: 200,
    height: 300,
    canvas: null,
    context: null
  },
  methods: {
    generate() {
      // 创建 canvas 元素
      this.canvas = document.createElement('canvas');
      this.canvas.width = this.width;
      this.canvas.height = this.height;
      document.body.appendChild(this.canvas);

      // 获取 canvas 上下文
      this.context = this.canvas.getContext('2d');
    }
  }
});

在 generate 方法中，可以根据用户输入的宽度和高度创建一个指定大小的 canvas 元素，并获取其上下文。接下来，可以添加二维码、条形码、文字等内容：

generate() {
  // 创建 canvas 元素
  this.canvas = document.createElement('canvas');
  this.canvas.width = this.width;
  this.canvas.height = this.height;
  document.body.appendChild(this.canvas);

  // 获取 canvas 上下文
  this.context = this.canvas.getContext('2d');

  // 添加二维码
  const qr = new QRCode({
    width: this.width,
    height: this.height,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H
  });
  qr.addData('https://www.example.com');
  qr.make();
  const qrImg = qr.createImgTag(8, 0);
  const qrEl = document.createElement('div');
  qrEl.innerHTML = qrImg;
  const qrCanvas = document.createElement('canvas');
  qrCanvas.width = this.width;
  qrCanvas.height = this.height;
  qrCanvas.style.position = 'absolute';
  qrCanvas.style.left = '0';
  qrCanvas.style.top = '0';
  const qrContext = qrCanvas.getContext('2d');
  const qrImgEl = qrEl.querySelector('img');
  qrContext.drawImage(qrImgEl, 0, 0, this.width, this.height);
  document.body.appendChild(qrCanvas);

  // 添加条形码
  JsBarcode(qrCanvas, '123456789012', {
    format: 'ean13',
    lineColor: '#000000',
    width: 2,
    height: 50
  });

  // 添加文字
  this.context.font = '20px Arial';
  this.context.fillStyle = '#000000';
  this.context.fillText('Hello, world!', 50, 50);
}

在添加二维码、条形码、文字等内容时，可以根据需要对它们的长宽和在纸张上的位置进行调整：

// 添加二维码，并设置长宽和位置
const qr = new QRCode({
  // ...
});
// ...
qrContext.drawImage(qrImgEl, 50, 50, 100, 100);

// 添加条形码，并设置长宽和位置
JsBarcode(qrCanvas, '123456789012', {
  // ...
});
const barcodeEl = qrCanvas.querySelector('svg');
barcodeEl.setAttribute('width', '200');
barcodeEl.setAttribute('height', '50');
barcodeEl.style.position = 'absolute';
barcodeEl.style.left = '50px';
barcodeEl.style.top = '200px';

// 添加文字，并设置位置
this.context.font = '20px Arial';
this.context.fillStyle = '#000000';
this.context.fillText('Hello, world!', 50, 50);

最后，可以添加一些样式来美化生成的纸张：

canvas {
  border: 1px solid #dddddd;
}

svg {
  background-color: #ffffff;
  border: 1px solid #dddddd;
}

完整的代码示例：https://codepen.io/zhongzhi/pen/xxKNVzN