JavaScript 實(shí)現(xiàn)復(fù)制功能

網(wǎng)頁(yè)開(kāi)發(fā)中，實(shí)現(xiàn)復(fù)制功能是一項(xiàng)常見(jiàn)的需求。本文將介紹如何使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)上的復(fù)制功能，為您揭秘這一實(shí)用技巧。

步驟一：創(chuàng)建復(fù)制按鈕

首先，在HTML文件中創(chuàng)建一個(gè)按鈕，并設(shè)置一個(gè)唯一的id，用于后續(xù)的處理。

<button id="copyButton">復(fù)制文本</button>

步驟二：編寫(xiě)復(fù)制函數(shù)

接著，在JavaScript中編寫(xiě)復(fù)制函數(shù)，該函數(shù)將實(shí)現(xiàn)復(fù)制功能。

document.getElementById("copyButton").addEventListener("click", function() {
 // 希望復(fù)制的文本內(nèi)容
 var text = "要復(fù)制的文本內(nèi)容";
 // 創(chuàng)建一個(gè)元素
 var input = document.createElement("input");
 input.setAttribute("value", text);
 // 將元素追加到頁(yè)面中
 document.body.appendChild(input);
 // 選中元素中的文本內(nèi)容
 input.select();
 // 執(zhí)行復(fù)制操作
 document.execCommand("copy");
 // 移除元素
 document.body.removeChild(input);
 // 顯示復(fù)制成功提示
 alert("復(fù)制成功！");
});

步驟三：測(cè)試程序

我們嘗試運(yùn)行程度，然后點(diǎn)擊一下復(fù)制按鈕；

運(yùn)行結(jié)果：

至此，我們已完成了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)復(fù)制功能的所有步驟。

在實(shí)際運(yùn)用中，您可以根據(jù)需要對(duì)復(fù)制功能進(jìn)行改進(jìn)，例如添加復(fù)制成功的提示、處理異常情況等。通過(guò)掌握這一技巧，您可以為用戶(hù)提供更好的交互體驗(yàn)。

注意：

請(qǐng)?jiān)诤线m的時(shí)機(jī)將代碼部署到實(shí)際環(huán)境中進(jìn)行測(cè)試。

確保在使用execCommand("copy")方法時(shí)，瀏覽器攔截器或插件不會(huì)阻止復(fù)制操作。

部分移動(dòng)設(shè)備瀏覽器可能不支持execCommand方法，因此請(qǐng)根據(jù)實(shí)際情況進(jìn)行兼容性處理。

時(shí)候，在網(wǎng)頁(yè)上看到感興趣的文件想復(fù)制里面的內(nèi)容，卻復(fù)制不了！今天小編跟大家分享一個(gè)代碼，用它就可以復(fù)制你想復(fù)制的內(nèi)容，方便吧~

例子說(shuō)明

想在網(wǎng)頁(yè)中復(fù)制一些內(nèi)容，卻被告知不能復(fù)制或需要登錄注冊(cè)什么的才可以復(fù)制！其實(shí)，用一個(gè)代碼就可以解決這個(gè)問(wèn)題~

輸入代碼

步驟：刪除原來(lái)的網(wǎng)址，輸入代碼，javascript：void($={});

注意：一定要手動(dòng)輸入，復(fù)制是無(wú)效的。

效果

輸完代碼，就可以開(kāi)始把你想復(fù)制的內(nèi)容復(fù)制下來(lái)啦，是不是很方便呢~

PS：需要將文件轉(zhuǎn)換成其他格式，可通過(guò)迅捷PDF轉(zhuǎn)換器進(jìn)行轉(zhuǎn)換。

明：文章內(nèi)容僅用于學(xué)習(xí)交流，切勿不當(dāng)使用。

上網(wǎng)的時(shí)候經(jīng)常會(huì)遇到網(wǎng)頁(yè)禁止復(fù)制文本或者禁止文檔下載的情況。今天結(jié)合案例分析下實(shí)現(xiàn)這些限制的手法和解除辦法。

1、文檔復(fù)制

首先創(chuàng)建一個(gè)demo.html的文檔，文檔內(nèi)容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO</title>
    <style>
        body {background-color: aqua;}
    </style>
</head>
<body>
    <div class="content">測(cè)試文本測(cè)試文本測(cè)試文本</div>
    <script>
        let htmlEle = document.documentElement;
        let bodyEle = document.querySelector('body');
        htmlEle.addEventListener('selectstart', (e) => {
            e.preventDefault();
        });
        bodyEle.addEventListener('copy', (e) => {
            e.preventDefault();
        });
        bodyEle.addEventListener('selectstart', (e) => {
            e.preventDefault();
        });
        bodyEle.addEventListener('contextmenu', (e) => {
            e.preventDefault();
        });
    </script>
</body>
</html>

打開(kāi)文檔可以發(fā)現(xiàn)，頁(yè)面文本是無(wú)法選擇并復(fù)制的。因?yàn)槿绱a所示，頁(yè)面元素被綁定了幾個(gè)事件（選擇、拷貝、右鍵菜單），阻止了用戶(hù)對(duì)文本的復(fù)制企圖。

怎么辦呢？

打開(kāi)瀏覽器的開(kāi)發(fā)者工具，切換到Elements標(biāo)簽下，選擇文本元素，這時(shí)可以在下方的“事件監(jiān)聽(tīng)器”中查看到目標(biāo)元素及其祖先元素上綁定的事件。展開(kāi)這些相關(guān)的事件，可以看到“移除”按鈕，接下來(lái)只需點(diǎn)擊按鈕將這些限制事件移除便可以復(fù)制了。

上述辦法是在事件綁定后，再將它們移除。此外，也可以通過(guò)抓包改包的方式移除綁定事件相關(guān)的代碼，從源頭阻止事件的綁定。這需要抓包工具的輔助，這里用到的是Fiddler。

假設(shè)網(wǎng)頁(yè)部署在本地服務(wù)器上，首先，打開(kāi)Fiddler，在右側(cè)切換到“自動(dòng)轉(zhuǎn)發(fā)”面板（帶閃電圖標(biāo)的），勾選圖中兩個(gè)選項(xiàng)；然后添加規(guī)則，填上要更改的請(qǐng)求地址以及要替換的本地文件（假設(shè)為demo1文件，內(nèi)容如下），填好后保存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO</title>
    <style>
        body {background-color: #dedede;}
    </style>
</head>
<body>
    <div class="content">測(cè)試文本測(cè)試文本測(cè)試文本</div>
</body>
</html>

設(shè)置好以后再次刷新網(wǎng)頁(yè)，會(huì)發(fā)現(xiàn)頁(yè)面的背景色發(fā)生了變化，而且文本也可以直接復(fù)制了。

2、文檔下載

此處以網(wǎng)上的一個(gè)文檔為例，文檔可以在線查看，但是無(wú)法直接下載。通過(guò)開(kāi)發(fā)者工具選中文檔，可以看到它對(duì)應(yīng)了一個(gè)img標(biāo)簽（以前是canvas），我們可以將圖片保存到本地，但是如果頁(yè)面比較多，手動(dòng)操作就很麻煩，所以可以用代碼幫我們自動(dòng)執(zhí)行，將圖片合并成pdf文件并下載到本地。

以下代碼可做參考：

function loadScript (url) {
  let ele = document.createElement('script')
  ele.src = url
  document.body.appendChild(ele)
}
function img2dataUrl (options) {
  let result = ''
  let img = options.img || ''
  let width = options.width || img.naturalWidth || img.clientWidth
  let height = options.height || img.naturalHeight || img.clientHeight
  let quality = options.quality || 100
  let mimeType = options.mimeType || 'image/png'
  let canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height
  let ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height)
  result = canvas.toDataURL(mimeType, quality / 100)
  return result
}

loadScript('https://cdn.bootcdn.net/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js')

function img2pdf () {
  let imgArr = [...document.querySelectorAll('.reader_inner img')]
  if (imgArr.length === 0) return
  let doc = new jspdf.jsPDF({unit:'px'});
  imgArr.forEach((v,i) => {
    v.setAttribute("crossOrigin",'anonymous');
    let pxPermm = v.width / 210 / 2.2;
    let imgData = img2dataUrl({img:v}).slice('data:image/png;base64,'.length);
    (i > 0) && doc.addPage();
    doc.addImage(imgData, 'png', 0, 0, v.width / pxPermm, v.height / pxPermm);
  })
  doc.save('img2pdf.pdf');
}

將代碼放到控制臺(tái)或者代碼段中執(zhí)行，執(zhí)行后，再在控制臺(tái)調(diào)用 img2pdf() 方法即可將可瀏覽的頁(yè)面合并成PDF下載到本地。

在線咨詢(xún)

上一篇：javascript做的100%表白成功特效，不成功我補(bǔ)你！
下一篇：“圖片滑動(dòng)樣式”修改HTML教程

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商