Распечатайте форму по другой ссылке, нажав кнопку

Question

Я пытаюсь выяснить, как напечатать изображение с другой ссылки на веб-странице при нажатии кнопки.Я знаю window.print(), но как я могу указать другую ссылку, с которой я хочу напечатать изображение?

Answer 1

Тот же домен

Если страница, которую вы хотите распечатать, принадлежит тому же домену, что и родительский элемент iframe, тогда у MDN есть хороший пример того, как это сделать.

Вы должны создать скрытый iframe, загрузить в него свою страницу, распечатать содержимое iframe и затем удалить iframe.

JavaScript:

function printURL( url ) {
    var frame = document.createElement( "iframe" );
    frame.onload = printFrame;
    frame.style.display = 'none';
    frame.src = url;
    document.body.appendChild(frame);
    return false;
}
function printFrame() {
    this.contentWindow.__container__ = this;
    this.contentWindow.onbeforeunload = closeFrame;
    this.contentWindow.onafterprint = closeFrame;
    this.contentWindow.focus(); // Required for IE
    this.contentWindow.print();
}
function closeFrame () {
    document.body.removeChild(this.__container__);
}

HTML:

<button onclick="printURL('page.html');">Print external page!</button>

Кросс-домен

Если страница, которую вы хотите распечатать, принадлежит другому домену, ваш браузер выдаст сообщение об ошибке политики того же происхождения.Это функция безопасности, которая запрещает сценариям доступ к некоторым данным из разных доменов.

Для распечатки междоменного содержимого вам потребуется очистить исходный код страницы и загрузить его в iframe.После этого браузер будет считать, что содержимое iframe исходит от вашего домена, и не будет икать при попытке печати. ​​

Однако, если вы попытаетесь сделать это в веб-интерфейсе, это просто отодвинет проблему на один шаг назад.кроме того, так как политика того же происхождения также не позволит вам очищать контент из другого домена таким образом.Но такая же политика сбора данных - это то же самое, что связать быка хлопковой нитью - это вас не сдерживает - поэтому это препятствие легко обойти.Вы можете написать свой собственный бэкэнд-скрипт (на PHP или по вашему выбору), который будет очищать контент и доставлять его на вашу страницу, или вы можете использовать любой из множества веб-сервисов, которые уже делают это.https://multiverso.me/AllOrigins/ так же хорош, как и любой другой, он не требует бэкэнд-программирования, и он бесплатный, поэтому я буду использовать его в этом примере.

Используя Jquery, модифицированную printURL функцию сверхубудет выглядеть следующим образом:

function printURL( url ) {
    var jsonUrl = 'http://allorigins.me/get?url=' + encodeURIComponent(url) + '&callback=?';
    // the url / php function that allows content to be scraped from different origins.

    $.getJSON( jsonUrl, function( data ) {
        // get the scraped content in data.content
        var frame = document.createElement( "iframe" ),
        iframedoc = frame.contentDocument || frame.contentWindow.document;
        frame.onload = printFrame;
        frame.style.display = 'none';
        iframedoc.body.html( data.contents );
        document.body.appendChild(frame);
    }
    return false;
}

Остальные функции, описанные выше, останутся прежними.

Обратите внимание, что если печатаемая страница создается с использованием вызовов AJAX или имеет значительные стили с использованием сценариев, тоiframe может напечатать что-то, что выглядит совсем не так, как вы ожидали.