使用 JS 复制页面内容的三种方案

下面是使用 JS 复制页面内容的三种方案的完整攻略：

下面是使用 JS 复制页面内容的三种方案的完整攻略：

一、使用 document.execCommand() 方法

1. 步骤

1. 将待复制的内容放到一个元素中，例如一个 div 标签，在这里我们以一个具有 class 为 "copy-content" 的 div 块为例。

   html
<div class="copy-content">
<p>这是要被复制的文本。</p>
</div>

2. 在 JS 中获取该元素。

   javascript
const copyContent = document.querySelector('.copy-content');

3. 创建一个 button 元素用于触发复制。

   html
<button class="copy-button">复制</button>

4. 给 button 添加事件监听器，监听点击事件，在点击按钮时触发复制操作。

   javascript
const copyButton = document.querySelector('.copy-button');
copyButton.addEventListener('click', () => {
const range = document.createRange();
range.selectNode(copyContent);
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
console.log('复制成功：', copyContent.innerText);
});

2. 示例说明

在此示例中，我们创建了一个具有 class 为 "copy-content" 的 div 元素，其中包含了要被复制的文本。接着，我们创建了一个 button 元素用于触发复制操作。当点击按钮时，JS 会将要复制的文本放到一个 range 中，并使用 execCommand() 方法进行复制操作。复制成功后，控制台会输出 "复制成功：待复制的文本"。

二、使用 Clipboard API

1. 步骤

1. 在 HTML 中添加按钮。

   html
<button class="copy-button">复制</button>

2. 给按钮添加点击事件监听器，使用 navigator.clipboard.writeText() 方法进行复制操作。

   javascript
const copyButton = document.querySelector('.copy-button');
copyButton.addEventListener('click', () => {
const textToCopy = '这是要被复制的文本。';
navigator.clipboard.writeText(textToCopy)
.then(() => {
console.log('复制成功：', textToCopy);
})
.catch(() => {
console.log('复制失败！');
});
});

2. 示例说明

在此示例中，我们创建了一个名为 "copy-button" 的按钮，并为它添加了点击事件监听器。当点击按钮时，JS 会调用 navigator.clipboard.writeText() 方法，并将要复制的文本作为参数传入。如果复制成功，则会输出 "复制成功：待复制的文本"。如果失败，控制台会输出 "复制失败！"。

三、使用 Flash

1. 步骤

1. 下载并引入 ZeroClipboard。

   html
<script src="https://cdn.bootcss.com/zeroclipboard/2.3.0/ZeroClipboard.min.js"></script>

2. 创建一个具有 class 为 "copy-content" 的元素，其中包含了要被复制的文本。

   html
<div class="copy-content">
<p>这是要被复制的文本。</p>
</div>

3. 创建一个 button 元素，用于触发复制操作。

   html
<button class="copy-button" data-clipboard-text="这是要被复制的文本。">复制</button>

4. 在 JS 中初始化 ZeroClipboard。

   javascript
const copyButton = document.querySelector('.copy-button');
const clip = new ZeroClipboard(copyButton);

2. 示例说明

在此示例中，我们引入了 ZeroClipboard 库，然后创建了具有 class 为 "copy-content" 的元素，并包含了要被复制的文本。接着，我们创建了一个 button 元素，并在其中使用 data-clipboard-text 属性设置要被复制的文本。最后，使用 JS 初始化 ZeroClipboard，并将其绑定到按钮上。

当点击按钮时，ZeroClipboard 会将 data-clipboard-text 属性中的文本复制到剪贴板中。如果复制成功，则会输出 "复制成功：待复制的文本"。注意：为了使用 ZeroClipboard，你需要在服务器环境中运行这个示例，否则会因为安全限制而无法进行复制操作。

希望这些方案对你有所帮助！