vue将二维码做成名片，并且生成图片保存

liaozk_c

于 2024-08-27 11:29:17 发布

阅读量493

点赞数 9

分类专栏：日常工作总结文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/liao3399084/article/details/141598336

版权

效果图

在这里插入图片描述

1. 安装html2canvas

首先，你需要在你的Vue项目中安装html2canvas。你可以通过npm或yarn来安装它：

npm install html2canvas  
# 或者  
yarn add html2canvas

2.组件形式

2.1 创建组件

在你的Vue项目中，创建一个新的Vue组件，比如BusinessCard.vue，用来展示名片并处理图片的保存。

<template>  
  <div class="business-card-container" ref="businessCard">  
    <div class="qrcode-container">  
      <img :src="qrcodeSrc" alt="QR Code" class="qrcode">  
    </div>  
    <div class="info">  
      <h2>{
   {
    name }}</h2>  
      <p>{
   {
    position }}</p>  
      <p>联系电话：{
   {
    phone }}</p>  
      <p>邮箱：{
   {
    email }}</p>  
    </div>  
    <button @click="saveAsImage">保存为图片</button>  
  </div>  
</template>  
  
<script>  
import html2canvas from 'html2canvas';  
  
export default {
     
  data() {
     
    return {
     
      qrcodeSrc: 'path/to/your/qrcode.png', // 你的二维码图片路径  
      name: '张三',  
      position: '软件工程师',  
      phone: '123-456-7890',  
      email: 'zhangsan@example.com',  
    };  
  },  
  methods: {
   <