Как загрузить текущую страницу в виде файла / вложения, используя Javascript? - PullRequest
Новая
       11

Как загрузить текущую страницу в виде файла / вложения, используя Javascript?

10 голосов
/ 01 сентября 2011

Мне известен скрытый трюк в iFrame, как упомянуто здесь (/279198/zagruzka-faila-s-pomoschy-javascript) и в других ответах.

Меня интересует похожая проблема:

Как я могу использовать Javascript для загрузки текущей страницы (IE: текущий DOM или некоторый его подмножество) в виде файла?

У меня есть веб-страница, которая извлекает результаты из недетерминированного запроса (например, случайной выборки) для отображения пользователю. Я уже могу с помощью параметра querystring заставить страницу возвращать файл вместо рендеринга страницы. Я могу добавить кнопку «Получить версию файла» (наш стандартный подход), но результаты будут отличаться от отображаемых, поскольку это другой запуск запроса.

Есть ли какой-либо способ через Javascript загрузить текущую страницу в виде файла или копировать в буфер обмена единственный вариант?

EDIT Вариант, предложенный Стефаном Кендаллом и dj_segfault, состоит в том, чтобы написать сторону сервера результатов для последующего извлечения. Хорошая идея, но, к сожалению, в этом случае не может быть и речи о создании файлового сервера.

Как насчет дрожь , передающей innerHTML в качестве параметра сообщения на другую страницу?

Ответы [ 5 ]

17 голосов
/ 01 сентября 2011

Можно попробовать с протоколом data:text/attachment

Как в: 

<html>
<head>
    <style>
    </style>
</head>
<body>
    <div id="hello">
        <span>world</span>
    </div>
<script>
(function(){
    document.location = 
        'data:text/attachment;,' + //here is the trick
        document.getElementById('hello').innerHTML;
            //document.documentElement.innerHTML; //To Download Entire Html Source
})();
</script>
</body>
</html>

Редактировать после комментария шесек

6 голосов
/ 26 июня 2013

Чтобы добавить к потрясающему ответу Mic выше, некоторые дополнительные пункты:

Если у вас есть контент Unicode (или вы хотите сохранить отступ в источнике), вам нужно преобразовать строку в Base64 и сообщитьURI данных для обработки данных как таковых: 
(function(){
    document.location = 
        'data:text/attachment;base64,' + // Notice the new "base64" bit!
        utf8_to_b64(document.getElementById('hello').innerHTML);
            //utf8_to_b64(document.documentElement.innerHTML); //To Download Entire Html Source
})();

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

utf_to_b64 () через MDN - работает в Chrome / FF.

Вы можете поместить все это в тег привязки, что позволит вам установить атрибут загрузки: 
<a onclick="$(this).attr('href', 'data:text/plain;base64,' + utf8_to_b64($('html').clone().find('#generate').remove().end()[0].outerHTML));" download="index.html" id="generate">Generate static</a>

Это загрузит HTML-код текущей страницы в виде index.html и удалит ссылку, использованную для генерации вывода.,Это предполагает, что функция utf8_to_b64 () сверху определена где-то еще.

Некоторые полезные ссылки на URI данных:

1 голос
/ 01 сентября 2011

В зависимости от размера и необходимости поддержки старых браузеров, но вы можете рассмотреть возможность создания динамического файла с использованием данных: URI и ссылок на них.Я видел несколько мест, которые делают это.Чтобы браузер загружал, а не отображал его, поиграйтесь с типом контента, который вы указали в URI, и используйте новый атрибут загрузки html5.(Извините за любые опечатки, я пишу с моего телефона)

0 голосов
/ 01 сентября 2011

Можете ли вы не кэшировать результаты запроса, а сохранять их по какому-либо ключу?Таким образом, вы можете ссылаться на один и тот же вывод отчета навсегда или пока не появится ваш сборщик мусора.Это также подразумевает, что вы можете создавать статические URL-адреса для вывода отчетов, что, как правило, хорошо.

0 голосов
/ 01 сентября 2011

Я не думаю, что вы сможете сделать это именно так, как вы хотите.JavaScript не может создать файл и загрузить его по соображениям безопасности.Он также не может создать его на сервере для загрузки.

Что бы я сделал, если бы вы были на стороне сервера, создайте выходной файл с идентификатором сеанса в имени во временном каталоге при созданиивывод для веб-страницы, и есть кнопка на веб-странице со ссылкой на этот файл.

Возможно, вам понадобится отдельный процесс удаления файлов старше одного дня или что-то в этом роде.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...