Simpan salinan yang tepat dari halaman web yang aman dalam bentuk vektor-grafik

9

Saya ingin menyimpan replika halaman web yang tepat dalam bentuk vektor-grafik, jadi saya tidak dapat menggunakan teknik tangkapan layar (karena itu menyimpan gambar dalam bentuk grafis-rastor).

Saya sudah mencoba 'print to pdf' dan 'save as pdf' melalui Safari, Chrome, dan Firefox. Ini berfungsi sebagian besar waktu. Namun, pdf yang disimpan bukan replika yang tepat untuk semua halaman web. Sebagai contoh, cobalah menyimpan halaman web ini sebagai pdf, dan perhatikan bagaimana ikon upvote / downvote tidak termasuk dalam pdf yang disimpan.

Saya juga mencoba menyimpan sebagai WebArchive dengan Safari. Masalahnya di sini adalah bahwa saya perlu memotong file yang dihasilkan, dan saya tidak tahu cara memotong WebArchive, karena Preview tidak dapat membukanya, dan itu hanya terbuka di Safari (kembali ke titik awal).

Saya juga sudah mencoba plugin browser web yang menyediakan solusi satu-klik untuk menyimpan halaman web sebagai pdf (bentuk vektor-grafis). Ini berfungsi lebih baik (halaman yang tepat disimpan) dan hampir menyelesaikan masalah, kecuali bahwa program ini bekerja dengan mengirimkan url halaman ke program berbasis cloud untuk meminta dan kemudian menyimpan halaman. Ini berarti bahwa teknik ini tidak akan berfungsi untuk situs https yang memerlukan kredensial saya untuk masuk.

Jadi saya berada di sudut. Saya mencoba menyimpan replika vektor-grafis dari laman web yang membutuhkan kredensial masuk saya untuk melihatnya. Bagaimana saya bisa melakukan ini?

macos google-chrome vector-graphics Clayton Stanley
sumber
1
Saya pikir Anda bingung - PDF bukan format vektor.
Kevin Panko
Tidak bingung; hanya saja tidak terlalu mengkhawatirkan perincian bahwa pdf adalah wadah yang dapat menyimpan barang-barang vektor-grafis, karena saya pikir poin utama dalam pertanyaan ini sedang disampaikan
Clayton Stanley
Pertanyaan Anda tampaknya adalah "Bagaimana saya bisa menyimpan halaman web sebagai file PDF, persis seperti yang ditampilkan di layar, dan bekerja dengan halaman yang memerlukan kata sandi untuk masuk?"
Kevin Panko
Tidak harus pdf; itu hanya satu rute untuk menyimpan halaman web di mana teks dalam bentuk vektor-grafis. Saya tidak harus berkomitmen ke format itu. Saya akan menambahkan aman ke judul untuk catatan kedua, sehingga ini ditekankan lebih baik.
Clayton Stanley

Jawaban:

6

Anda mendapatkan hasil yang berbeda dengan mencetak halaman ke PDF daripada yang Anda lihat saat melihat halaman di layar.

Ini terjadi karena halaman web menyertakan CSS stylesheet yang mengubah halaman ketika sedang dicetak.

Pertanyaan ini akan membantu Anda menghindari masalah itu: Bagaimana cara saya mencetak dengan stylesheet layar?

Ikuti instruksi di sana untuk mencetak halaman dengan stylesheet pada layar.

Maka Anda harus dapat mencetak ke PDF dan mendapatkan hasil yang sama seperti yang Anda lihat di layar.

Kevin Panko
sumber
1
Hanya untuk dokumentasi lengkap, saya akhirnya menggunakan plugin Chrome Web Developer, dan mengedit css melalui plugin ini. Saya tidak bisa mendapatkan halaman cetak untuk diperbarui setelah mengedit css menggunakan Alat Pengembang bawaan Google Chrome, tetapi ini kemungkinan besar karena saya tidak terbiasa dengan alat itu.
Clayton Stanley
4

Jika Anda tidak takut dengan sedikit skrip, Anda dapat mencoba menggunakan aplikasi phantomjs untuk OSX dari http://phantomjs.org/

Maka Anda hanya akan menjalankan biner yang disertakan menggunakan skrip rasterize.js dengan perintah seperti:

phantomjs.exe rasterize.js http://www.example.com/sitepage 8.5in*11in outfile.pdf

Sepasang catatan:

  • Ini disebut 'rasterize.js' tetapi teks itu sendiri disimpan ke dalam PDF sebagai teks yang sebenarnya.

  • Otentikasi ke situs aman menggunakan otentikasi Windows dapat dilakukan dengan menambahkan beberapa baris ke skrip rasterize.js setelah menginisialisasi objek halaman:

var page = butuhkan ('halaman web'). create (),
    system = butuhkan ('system'),
    alamat, keluaran, ukuran;
    page.settings.userName = "serviceUserName"; // Aku menambahkan ini
    page.settings.password = "servicePassword"; // 2 baris di sini

if (system.args.length 5) {
nvuono
sumber
phantomjs rocks!
Matthew Lock