Button to copy page html

Question

Button to copy page html

Navigation

#1 by (4 votes)
#2 by (1 votes)

0

I need to provide a button where users will just click and copy all the code that was used to develop that page.

I saw many similar questions, but none could solve my problem. It would be basically so, imagine that the example code below corresponds to the page that I need to copy:

  <div class="conteudo-total">       
       <div>
           <h1>Titulo</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam laboriosam inventore blanditiis repellendus corrupti, ea, maxime magnam odio, vero consequatur, dolores hic. Accusantium voluptatem nulla velit, deserunt sequi eveniet debitis.</p>
       </div>       
 </div>   
 <div class="copiar">Copiar Código</div>

When I click on Copiar Código , I need to copy all contents html , that is, all the contents of the file. I know it would be much simpler to go into the file and copy the code directly from there, but it is an indispensable requirement that it be through a button ...

javascript html jquery

asked by anonymous 05.02.2018 / 13:22

2 answers

1

With pure javascript

function copiarHtml() {
    var x = document.getElementsByTagName("html")[0];
    var z = x.outerHTML;
    document.getElementById("demo").innerHTML = z;
    document.getElementById("demo").select();
    document.execCommand('copy');
}

    //para fora da viewport
    #demo{
      position :absolute;
      top: -1000px;
      left: -1000px;
    }

<button onclick="copiarHtml()">Copiar HTML</button>

<textarea id="demo"></textarea>
<br>
<textarea placeholder="cole aqui"></textarea>

With Jquery

$('button').click(function(){
  var txt = document.getElementsByTagName("html")[0];

  $('textarea.hide').text( txt.outerHTML) ;
  $("textarea.hide").select();
  document.execCommand('copy');
});

//para fora da viewport
textarea.hide{
  position :absolute;
  top: -1000px;
  left: -1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button>Copiemeuhtml</button><br/><textareaclass="hide"></textarea>

<textarea placeholder="cole aqui"></textarea>

With PHP

Library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

CSS

<styletype="text/css">
//para fora da viewport
.hide {
    position: absolute;
    top: -1000px;
    left: -1000px
}
</style>

SCRIPT

<script language="javascript">
$(document).ready(function() {
    $("button").click(function(){
        $("textarea").select();
        document.execCommand('copy');
    });
});
</script>

PHP + HTML

<?php
    // Lê todo o conteúdo de um arquivo
    $html = file_get_contents("Nome_do_arquivo_para_ler");

    $html = htmlentities($html);

    echo "<textarea class='hide'>". $html ."</textarea>";

?>

<button>Copie meu html</button>

Since Copy Hidden Elements text does not work (browser security limitation), all of the above examples use the “off -left” technique (described in ScreenreaderVisibility in css-discuss Wiki), which involves the absolute positioning of the hidden element out of the viewport.

However, you can copy text from hidden elements using the following technique:

Comments in the code itself

var copyBtn   = $("#copy-btn"),
textarea     = $("#copy-me");
    //conteúdo do arquivo
    var x = document.getElementsByTagName("html")[0];
    var z = x.outerHTML;
    document.getElementById("copy-me").innerHTML = z;

function copyToClipboard() {
  var success   = true,
      range     = document.createRange(),
      selection;

  // IE.
  if (window.clipboardData) {
    window.clipboardData.setData("Text", textarea.val());        
  } else {
    // Crie um elemento temporário fora da tela.
    var tmpElem = $('<div>');
    tmpElem.css({
      position: "absolute",
      left:     "-1000px",
      top:      "-1000px",
    });
    // Adicione o valor de entrada ao elemento temporário
    tmpElem.text(textarea.val());
    $("body").append(tmpElem);
    //Selecione o elemento temporario.
    range.selectNodeContents(tmpElem.get(0));
    selection = window.getSelection ();
    selection.removeAllRanges ();
    selection.addRange (range);
    // Permite copiar.
    try { 
      success = document.execCommand ("copy", false, null);
    }
    catch (e) {
      copyToClipboardFF(textarea.val());
    }
    if (success) {
      alert ("O código fonte desta página está na área de transferência, cole-o!");
      // remove o elemento temporario.
      tmpElem.remove();
    }
  }
}

copyBtn.on('click', copyToClipboard);

#copy-me {
    display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textareaname="" id="copy-me"/></textarea>
<button id="copy-btn">Copiar HTML</button><br/><br/>
<textarea placeholder="cole aqui"></textarea>

Source - of brother DavidDomain

05.02.2018 / 20:16

Change button name in event How to highlight a word using REGEX

score 4 · Accepted Answer

I made a function to copy the HTML of the current page through the button, but depending on the browser, some 'garbage' in the compilation is generated, mainly in opera , chrome and mozilla is quiet , and locally is perfect, if I find out how to remove this type of imperfection I edit the answer, follow the function ...

function copiarHTML() {
        let copyText = document.getElementsByTagName("html")[0];
        let input = document.createElement("input");
        input.id = "inp";
        input.value = copyText.outerHTML;
        copyText.appendChild(input);
        
        let copy = document.getElementById('inp');
        copy.select();
        document.execCommand("Copy");
        alert("O texto copiado foi: " + copy.value);
        
        copyText.removeChild(input);

        let textArea = document.createElement('textarea');
        textArea.cols = "80";
        textArea.rows = "40";
        textArea.placeholder = "Pressione Ctrl+v aqui";

        copyText.appendChild(textArea);
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Copiar HTML</title>
</head>
<body>
    <button onclick="copiarHTML()">
        Copiar HTML
    </button>
</body>
</html>