javascript - 复制检索到的 json 数据并以文本格式粘贴到文本编辑器中

Question

collegeDestails = [
      {
        "name": "Indirabai Meghe Mahila Mahavidyalaya,Amravati.",
        "address": "Morshi Road Amravati. 444602",
        "phone": 9423424787,
        "district": "Amravati",
        "email": "imc.amt@gmail.com"
      },
      {
        "name": "Indirabai Meghe Mahila Mahavidyalaya,Amravati.",
        "address": "Morshi Road Amravati. 444602",
        "phone": 9423424787,
        "district": "Amravati",
        "email": "imc.amt@gmail.com"
      },
      {
        "name": "Indirabai Meghe Mahila Mahavidyalaya,Amravati.",
        "address": "Morshi Road Amravati. 444602",
        "phone": 9423424787,
        "district": "Amravati",
        "email": "imc.amt@gmail.com"
      },

      {
        "name": "Indirabai Meghe Mahila Mahavidyalaya,Amravati.",
        "address": "Morshi Road Amravati. 444602",
        "phone": 9423424787,
        "district": "Amravati",
        "email": "imc.amt@gmail.com"
      },
      {
        "name": "Indirabai Meghe Mahila Mahavidyalaya,Amravati.",
        "address": "Morshi Road Amravati. 444602",
        "phone": 9423424787,
        "district": "Amravati",
        "email": "imc.amt@gmail.com"
      },
      {
        "name": "Indirabai Meghe Mahila Mahavidyalaya,Amravati.",
        "address": "Morshi Road Amravati. 444602",
        "phone": 9423424787,
        "district": "Amravati",
        "email": "imc.amt@gmail.com"
      },

      {
        "name": "Indirabai Meghe Mahila Mahavidyalaya,Amravati.",
        "address": "Morshi Road Amravati. 444602",
        "phone": 9423424787,
        "district": "Amravati",
        "email": "imc.amt@gmail.com"
      },
      {
        "name": "Indirabai Meghe Mahila Mahavidyalaya,Amravati.",
        "address": "Morshi Road Amravati. 444602",
        "phone": 9423424787,
        "district": "Amravati",
        "email": "imc.amt@gmail.com"
      },
      {
        "name": "Indirabai Meghe Mahila Mahavidyalaya,Amravati.",
        "address": "Morshi Road Amravati. 444602",
        "phone": 9423424787,
        "district": "Amravati",
        "email": "imc.amt@gmail.com"
      },
      {
        "name": "Indirabai Meghe Mahila Mahavidyalaya,Amravati.",
        "address": "Morshi Road Amravati. 444602",
        "phone": 9423424787,
        "district": "Amravati",
        "email": "imc.amt@gmail.com"
      }
    ]

<div class="card" *ngFor="let data of collegeDestails;let i = index">
                <div class="card-header">
                    <span class="font-weight-bold">{{ data.name }}</span>
                    <div class="form-check float-right">
                        <input class="form-check-input" type="checkbox" (change)="instituteChecked($event,i)">
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="details-section">
                                <p class="font-weight-bold">Address: </p>
                                <p>{{ data.address }}</p>
                            </div>
                            <div class="details-section">
                                <p class="font-weight-bold">Phone: </p>
                                <p>{{ data.phone }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="details-section">
                                <p class="font-weight-bold">District: </p>
                                <p>{{ data.district }}</p>
                            </div>
                            <div class="details-section">
                                <p class="font-weight-bold">Email:</p>
                                <p>{{ data.email }}</p>
                            </div>
                        </div>
                        <!-- <hr> -->
                    </div>
                </div>
            </div>

我正在使用 Angular 2，我想实现一个功能，即从我的服务器获取 JSON 格式的记录列表。当用户使用复选框选择多于一项或一项记录并单击复制按钮时，所有记录都应以文本格式复制，他/她可以粘贴到任何文本编辑器中。我怎样才能实现这个功能？先感谢您。 image

Answer 1

您可以创建一个 copyToClipboard 方法来对您的记录进行字符串化并将其存储到剪贴板中:

copyToClipboard(record:Record){
  let content = JSON.stringify(record);
  document.addEventListener('copy', (e: ClipboardEvent) => {
    e.clipboardData.setData('text/plain', content);
    e.preventDefault();
    document.removeEventListener('copy');
  });
  document.execCommand('copy');
};