Đã hỏi 4 năm, 3 tháng trước 4 years, 3 months ago
Đã xem 3k lần 3k times
Tôi đã săn lùng trên các diễn đàn này để tìm một số mã có thể tải xuống trang HTML như là [tức là với các phần tử được thêm vào từ các nút khác và về cơ bản mọi thứ trong div của tôi] để có thể chọn một lần khác với dữ liệu vẫn còn ở đó . Tôi không thể cho cuộc sống của tôi tìm thấy bất cứ thứ gì mà chỉ tải xuống trang. Dưới đây là gần nhất tôi thực sự lưu một tài liệu HTML, và thậm chí điều đó [rõ ràng] chỉ hiển thị văn bản được viết. Tôi có thể chỉnh sửa cái này để làm cho nó gói gọn toàn bộ trang không? Với rất ít kinh nghiệm, tôi chỉ có thể xin lỗi.
function save[] {
var anchor = document.querySelectory['button'];
anchor.setAttribute['download', 'index.html'];
anchor.setAttribute['href', 'data:text/html;charset=UTF-8,asdf
']
}
Đã hỏi ngày 23 tháng 7 năm 2018 lúc 17:37Jul 23, 2018 at 17:37
1
Một giải pháp là filesaver.js
Thực hiện theo ví dụ trên trang đó và sử dụng document.innerHTML
cho blob của bạn [những gì tôi đã sử dụng] thực sự, tôi quên nếu điều đó loại trừ tiêu đề. Nếu vậy, có một giải pháp tôi tìm thấy cho điều này [cũng trên Stackoverflow] nhưng tôi không có mã ở đây để xem xét cách tôi đi xung quanh điều này [nếu tôi thực sự, phải vượt qua điều này]
Đã trả lời ngày 23 tháng 7 năm 2018 lúc 17:45Jul 23, 2018 at 17:45
ControlaltDelControlaltDelControlAltDel
32,9k9 Huy hiệu vàng49 Huy hiệu bạc79 Huy hiệu đồng9 gold badges49 silver badges79 bronze badges
Bạn có thể thử cái này
download html content
function myFunction[] {
var content = document.documentElement.innerHTML;
download[content, "index", "txt"]
}
function download[content, fileName, fileType] {
var link = document.getElementById["donwload-link"];
var file = new Blob[[content], {type: fileType}];
var donwloadFile = fileName + "." + fileType;
link.href = URL.createObjectURL[file];
link.download = donwloadFile
}
//jsfiddle.net/a9oLw1zv/13/
Đã trả lời ngày 23 tháng 7 năm 2018 lúc 18:04Jul 23, 2018 at 18:04
Tìm hiểu cách tạo một nút mở trình duyệt của bạn in hoặc lưu dấu nhắc cửa sổ tệp khi bạn nhấp vào nó.print or save file window prompt when you click on it.
Nếu bạn muốn in hoặc lưu một trang trên bất kỳ trang web nào, bạn có thể truy cập trình duyệt của mình [thường là góc trên cùng bên trái]:
- Nhấp vào Tệp → In → và nhấp vào nút Lưu để lưu tệp dưới dạng tài liệu PDF hoặc in nó bằng máy in của bạn.File → Print → and either click the Save button to save the file as a PDF document, or print it with your printer.
- In / Lưu phím tắt: CMD + P [Mac] / Ctrl + P [Windows]. cmd + p [Mac] / ctrl + p [Windows].
Nhưng điều gì sẽ xảy ra nếu bạn muốn làm cho người dùng của bạn in hoặc lưu một trang dễ dàng hơn, bằng cách cung cấp cho họ một nút in hoặc lưu tệp ngay lập tức mở cửa sổ dấu nhắc in của trình duyệt khi nhấp?
Không có vấn đề gì, trước tiên hãy để Let tạo một nút có tên lớp phù hợp:
Print or Save Document
Làm cho mã của bạn dễ đọc cho tất cả mọi người!
Đối với những thứ như các lớp, biến và chức năng, nó thường tốt hơn để sử dụng các tên dài hơn, rõ ràng như chúng ta làm trên nút trên. Trái ngược với các tên ngắn, viết tắt [ẩn], như btn-pos-d
. Không ai thích đọc điều đó.classes, variables, and functions it’s generally better to use longer, explicit names as we do on the button above. As opposed to short, abbreviated [implicit] names, like btn-pos-d
. Nobody likes reading
that.
Bây giờ, hãy để nút tạo nút tương tác với JavaScript:
const buttonPrintOrSaveDocument = document.querySelector[
".button-print-or-save-document"
]
function printOrSave[] {
window.print[]
}
buttonPrintOrSaveDocument.addEventListener["click", printOrSave]
Bây giờ bạn có thể sử dụng lại phần tử nút này trên bất kỳ trang web nào mà bạn muốn cung cấp tùy chọn in hoặc lưu tài liệu nhanh cho người dùng.
Cách thức hoạt động của mã
- Đầu tiên, chúng tôi chọn nút có lớp
button-print-or-save-document
và lưu trữ tham chiếu đến nó trong biếnconst
[buttonPrintOrSaveDocument
]. - Sau đó, chúng tôi thực hiện một khai báo chức năng được đặt tên
printOrSave[]
thực thi phương thức
0 khi nó được gọi.download html content function myFunction[] { var content = document.documentElement.innerHTML; download[content, "index", "txt"] } function download[content, fileName, fileType] { var link = document.getElementById["donwload-link"]; var file = new Blob[[content], {type: fileType}]; var donwloadFile = fileName + "." + fileType; link.href = URL.createObjectURL[file]; link.download = donwloadFile }
- Cuối cùng, chúng tôi đã thiết lập một trình nghe sự kiện với hai đối số: một đối số lắng nghe sự kiện
1 trên phần tử nút và một đối số để gọi hàmdownload html content function myFunction[] { var content = document.documentElement.innerHTML; download[content, "index", "txt"] } function download[content, fileName, fileType] { var link = document.getElementById["donwload-link"]; var file = new Blob[[content], {type: fileType}]; var donwloadFile = fileName + "." + fileType; link.href = URL.createObjectURL[file]; link.download = donwloadFile }
2.download html content function myFunction[] { var content = document.documentElement.innerHTML; download[content, "index", "txt"] } function download[content, fileName, fileType] { var link = document.getElementById["donwload-link"]; var file = new Blob[[content], {type: fileType}]; var donwloadFile = fileName + "." + fileType; link.href = URL.createObjectURL[file]; link.download = donwloadFile }
Kiểm tra mã demo.