在 Vue 2 项目中，你可以使用 qrcode 库来生成二维码。以下是实现步骤：

1. 安装二维码库：
   你可以使用 npm 或 yarn 安装 qrcode。

   npm install qrcode
   

   或者

   yarn add qrcode
   

2. 创建二维码组件：

要确保生成的二维码在 canvas 上显示为 240px x 240px，并且二维码的实际内容也保持正确的比例，可以按照以下步骤设置 canvas 的属性和样式：

1. 设置 canvas 的属性：
   在 Vue 组件中，使用 width 和 height 属性来定义 canvas 的实际尺寸，这将影响绘制的内容。

2. 设置 canvas 的 CSS 大小：
   为了使显示效果一致，确保在 CSS 中也设置相同的宽高。

以下是更新后的 QRCodeGenerator.vue 组件示例：

<template>
  <div>
    <canvas
      ref="canvas"
      :width="canvasSize"
      :height="canvasSize"
      style="border: 1px solid #ccc;"
    ></canvas>
    <button @click="downloadQRCode">下载二维码</button>
  </div>
</template>

<script>
import QRCode from 'qrcode';

export default {
  props: {
    url: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      canvasSize: 240, // 设置 canvas 的宽高为 240px
    };
  },
  mounted() {
    this.generateQRCode(this.url);
  },
  methods: {
    generateQRCode(url) {
      QRCode.toCanvas(
        this.$refs.canvas,
        url,
        {
          errorCorrectionLevel: 'H',
          width: this.canvasSize, // 设置二维码的宽度
        },
        (error) => {
          if (error) console.error(error);
          console.log('QR code generated!');
        }
      );
    },
    downloadQRCode() {
      const canvas = this.$refs.canvas;
      const link = document.createElement('a');
      link.href = canvas.toDataURL('image/png');
      link.download = 'qrcode.png';
      link.click();
    },
  },
};
</script>

<style scoped>
canvas {
  width: 240px; /* 设置 CSS 显示大小 */
  height: 240px; /* 设置 CSS 显示大小 */
  margin-top: 20px;
}
</style>

关键点：

• 在 canvas 元素上设置了 :width 和 :height 属性，以确保二维码生成时的实际尺寸为 240x240 像素。
• 在 generateQRCode 方法中，传递 width: this.canvasSize 参数，确保生成的二维码适应 canvas 尺寸。
• CSS 中也设置了 width 和 height，以确保 canvas 在页面中的显示大小为 240px x 240px。

这样可以确保二维码在视觉上和实际绘制上都是 240px x 240px。

3. 在父组件中使用二维码组件：
   在你想显示二维码的父组件中引入并使用 QRCodeGenerator 组件。

   <template>
     <div>
       <QRCodeGenerator :url="url" />
     </div>
   </template>
   
   <script>
   import QRCodeGenerator from './QRCodeGenerator.vue';
   
   export default {
     components: {
       QRCodeGenerator,
     },
     data() {
       return {
         url: 'https://example.com', // 从后端获取的 URL
       };
     },
   };
   </script>
   

这样，二维码就会根据你提供的 URL 生成，并且你可以通过按钮下载二维码图片。你可以根据需要调整样式和功能。