JavaScript 實現(xiàn)復制功能

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

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

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

<button id="copyButton">復制文本</button>

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

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

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

步驟三：測試程序

我們嘗試運行程度，然后點擊一下復制按鈕；

運行結果：

至此，我們已完成了JavaScript實現(xiàn)網頁復制功能的所有步驟。

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

注意：

請在合適的時機將代碼部署到實際環(huán)境中進行測試。

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

部分移動設備瀏覽器可能不支持execCommand方法，因此請根據(jù)實際情況進行兼容性處理。

時候，在網頁上看到感興趣的文件想復制里面的內容，卻復制不了！今天小編跟大家分享一個代碼，用它就可以復制你想復制的內容，方便吧~

例子說明

想在網頁中復制一些內容，卻被告知不能復制或需要登錄注冊什么的才可以復制！其實，用一個代碼就可以解決這個問題~

輸入代碼

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

注意：一定要手動輸入，復制是無效的。

效果

輸完代碼，就可以開始把你想復制的內容復制下來啦，是不是很方便呢~

PS：需要將文件轉換成其他格式，可通過迅捷PDF轉換器進行轉換。

明：文章內容僅用于學習交流，切勿不當使用。

上網的時候經常會遇到網頁禁止復制文本或者禁止文檔下載的情況。今天結合案例分析下實現(xiàn)這些限制的手法和解除辦法。

1、文檔復制

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

<!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">測試文本測試文本測試文本</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>

打開文檔可以發(fā)現(xiàn)，頁面文本是無法選擇并復制的。因為如代碼所示，頁面元素被綁定了幾個事件（選擇、拷貝、右鍵菜單），阻止了用戶對文本的復制企圖。

怎么辦呢？

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

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

假設網頁部署在本地服務器上，首先，打開Fiddler，在右側切換到“自動轉發(fā)”面板（帶閃電圖標的），勾選圖中兩個選項；然后添加規(guī)則，填上要更改的請求地址以及要替換的本地文件（假設為demo1文件，內容如下），填好后保存。

<!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">測試文本測試文本測試文本</div>
</body>
</html>

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

2、文檔下載

此處以網上的一個文檔為例，文檔可以在線查看，但是無法直接下載。通過開發(fā)者工具選中文檔，可以看到它對應了一個img標簽（以前是canvas），我們可以將圖片保存到本地，但是如果頁面比較多，手動操作就很麻煩，所以可以用代碼幫我們自動執(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');
}

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商