如何使用 Nuxt.js 将元素复制到剪贴板？

Question

我使用 Vuetify.js 创建了一个 Nuxt 网页，该网页从表单生成电子邮件签名以供填写。签名的渲染显示在一个v-card元素中。我添加了一个v-btn来自动将签名复制到用户的剪贴板中，但是我有一些问题......

我尝试使用nuxt-clipboard2来自 npm 来帮助我执行此操作，但没有任何效果...

有没有人知道如何正确使用这个包或有替代方法使用 Nuxt.js 将内容复制到剪贴板？

提前致谢 ：）

编辑

这是我的代码：

<template>
    <v-container fluid>

        <div class="display-3">Email signature</div>

        <signForm></signForm>

        <v-divider></v-divider>

        <v-container>
            <v-row justify="center" align="center">
                <v-col md="12">
                    <v-row justify="center" align="center">
                        <v-card color="fafafa" class="pa-3">
                            <signTemplate ref="foo"></signTemplate>
                        </v-card>
                    </v-row>
                </v-col>
                <v-btn class="ma-2" @click="copySign" tile>
                    <v-icon left>mdi-content-copy</v-icon>Copy the signature
                </v-btn>
            </v-row>
        </v-container>

    </v-container>
</template>


<script>
import signTemplate from '~/components/SignTemplate.vue'
import signForm from '~/components/signForm.vue'

export default {
  methods: {
    async copySign() {
        try {
            await this.$copyText(foo);
        } catch (e) {
            console.error(e);
        }
    }
  },
  components: {
      signTemplate,
      signForm
  }
}
</script>

编辑#2

这是signTemplate.vue代码。

<template>
    <div>
        <table cellpadding="0" cellspacing="0" style="font-variant-ligatures: normal; orphans: 2; widows: 2; border-spacing: 0px; border-collapse: collapse; color: rgb(68, 68, 68); width: 480px; font-size: 10pt; font-family: Arial, sans-serif; line-height: normal;">
            <tbody>
                <tr>
                    <td valign="top" style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; margin: 0px; padding: 10px 0px 12px; width: 160px; vertical-align: top;">
                        <a href="https://junior-entreprises.com/" target="_blank" style="background-color: transparent; color: rgb(51, 122, 183);">
                            <img border="0" alt="Logo" width="141" src="https://junior-entreprises.com/wp-content/uploads/2019/01/Logo-50-ans-JE-site.png" style="border: 0px; vertical-align: middle; width: 141px; height: auto;">
                        </a>
                        </td>
                        <td style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; margin: 0px; padding: 6px 0px; width: 320px;">
                            <table cellpadding="0" cellspacing="0" style="border-spacing: 0px; border-collapse: collapse; background-color: transparent;">
                                <tbody>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; font-size: 12pt; font-weight: bold; color: rgb(61, 60, 63);"> {{this.$store.getters["getSignFirstName"]}} {{this.$store.getters["getSignLastName"]}}</td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px 0px 11px; font-size: 10pt; color: rgb(61, 60, 63);">{{this.$store.getters["getSignJob"]}} {{this.$store.getters["getSignDiv"]}}</td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; color: rgb(155, 155, 155);"><font style="font-size: 12px;">tel: 01.43.70.26.56</font></td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; color: rgb(155, 155, 155);"><font style="font-size: 12px;">mobile: {{this.$store.getters["getSignPhone"]}}</font></td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; color: rgb(155, 155, 155);"><font style="font-size: 12px;">email: <span style="color: rgb(23, 147, 210);"><span style="color: rgb(183, 26, 81);"><a href="mailto:" target="_blank">{{this.$store.getters["getSignEmail"]}}</a></span></span></font></td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; color: rgb(155, 155, 155);"><font style="font-size: 12px;">6 Rue des immeubles Industriels</font></td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; color: rgb(155, 155, 155);"><font style="font-size: 12px;">75011, Paris</font></td>
                                    </tr>
                                    <tr>
                                        <td style="margin: 0px; padding: 6px 0px 0px;">
                                            <span style="display: inline-block; height: 22px;">
                                                <a href="https://fr-fr.facebook.com/junior.entreprises/" target="_blank" style="background-color: transparent; color: rgb(51, 122, 183);"><img alt="Facebook icon" border="0" width="23" height="23" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/elegant-logo/fb.png" style="border: 0px; vertical-align: middle; height: 20px; width: 20px;"></a>
                                                <a href="https://fr.linkedin.com/company/conf-d-ration-nationale-des-junior-entreprises" target="_blank" style="background-color: transparent; color: rgb(51, 122, 183);"><img alt="LinkedIn icon" border="0" width="23" height="23" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/elegant-logo/ln.png" style="border: 0px; vertical-align: middle; height: 20px; width: 20px;"></a>
                                                <a href="https://twitter.com/cnje" target="_blank" style="background-color: transparent; color: rgb(51, 122, 183);"><img alt="Twitter icon" border="0" width="23" height="23" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/elegant-logo/tt.png" style="border: 0px; vertical-align: middle; height: 20px; width: 20px;"></a>
                                                <a href="https://www.instagram.com/cnje/" target="_blank" style="background-color: transparent; color: rgb(51, 122, 183);"><img alt="Instagram icon" border="0" width="23" height="23" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/elegant-logo/it.png" style="border: 0px; vertical-align: middle; height: 20px; width: 20px;"></a>
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                <tr>
                    <td colspan="2" style="font-size: 13px; margin: 0px; padding: 8px 0px 0px; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(183, 26, 81); width: 480px; color: rgb(155, 155, 155); text-align: center;">Avec le soutiens de nos partenaires premiums: <a href="https://group.bnpparibas/" target="_blank">BNP Paribas</a>, <a href="https://www.alten.fr/" target="_blank">Alten</a>, <a href="https://www.ey.com/fr/fr/home" target="_blank">EY</a> et <a href="https://particuliers.engie.fr/" target="_blank">Engie</a>.</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

编辑 #3

这是现在看起来像我的页面的屏幕截图。我想v-card通过点击“Selectionner la signature”按钮来复制元素内的所有签名。

Answer 1

老实说，我认为这不需要 npm 包。只需使用 vanilla js 解决方案即可。太简单了。

这是现代的。它有非常可靠的浏览器支持

methods: {
  copySign() {
    //btw writeText() returns a promise so you could utilize that somehow if you want
    navigator.clipboard.writeText(this.$refs.foo.$el.outerHTML)
  }
}

就是这样。一行代码。

但是，如果您希望支持较旧的浏览器，请使用这种旧的更长的方法。

//Creating textarea element
let textarea = document.createElement("textarea")
//Settings its value to the thing you want to copy
textarea.value = this.$refs.foo.$el.outerHTML
//Appending the textarea to body
document.body.appendChild(textarea)
//Selecting its content
textarea.focus()
textarea.select()
//Copying the selected content to clipboard
document.execCommand("copy")
//Removing the textarea
document.body.removeChild(textarea)