Html2canvas: Peluru tidak diberikan

Dibuat pada 17 Mar 2013  ·  20Komentar  ·  Sumber: niklasvh/html2canvas

Jika saya memiliki daftar yang tidak berurutan atau terurut di markup html saya, peluru tidak dirender oleh html2canvas. Saya pikir ini adalah masalah yang cukup penting karena ini adalah fitur standar html yang didukung di semua browser sejak lama.

Feature

Komentar yang paling membantu

Trik sederhana:

HTML
<ul><li>Item 1</li><li>Item 2</li></ul>

SCSS
ul li { list-style-type: none; &:before { content: '• '; margin-left: -1em; } }

Semua 20 komentar

Solusinya secara teori seharusnya cukup sederhana (hanya lingkaran), tetapi apa pun solusinya, itu harus mempertimbangkan css untuk menyesuaikan tampilan peluru. Belum lagi item daftar biasanya digunakan untuk hal-hal yang bahkan tidak terlihat seperti daftar (misalnya header github yang memiliki "Kode", "Jaringan" dll. Adalah ul, jadi jelas tidak diperlukan peluru di sana karena daftar- tipe-gaya: tidak ada

http://www.w3schools.com/css/css_list.asp

Ada berita tentang ini? Saya sangat membutuhkan fungsi ini di aplikasi saya. Apakah ada yang punya ide/solusi tentang ini? Atau dapatkah seseorang memberi saya beberapa info tentang cara menerapkannya?

Ini biola yang membuktikan itu tidak berfungsi: http://jsfiddle.net/fYZ5h/

Akan senang melihat ini diperbaiki, terutama untuk daftar yang dipesan.

Sunting: Ada solusi sederhana untuk orang yang hanya tertarik melihat angka pada daftar yang dipesan. Ini akan berfungsi selama Anda mengatur properti CSS 'list-style-position' ke 'inside' pada elemen 'ol' Anda. Juga 'list-style-type' Anda harus cocok dengan ekspresi reguler berikut:

/^(desimal|desimal-leading-nol|alfa atas|latin atas|romawi atas|alfa bawah|yunani bawah|latin bawah|romawi bawah)$/i

... selama kedua batasan tersebut terpenuhi, angka-angka tersebut diberikan dengan benar untuk daftar yang dipesan. Anda dapat menggunakan CSS untuk menyesuaikan posisi daftar untuk mengimbangi dampak apa pun dari 'list-style-position: inside;' ada di tata letak Anda.

Saya membuat solusi untuk kotak tipe-daftar.

Mungkin solusi saya membantu Anda.

Permintaan Tarik: https://github.com/niklasvh/html2canvas/pull/417

+1 memiliki kemampuan untuk membuat peluru dalam daftar yang tidak berurutan...

Ini juga akan sangat membantu untuk proyek yang sedang saya kerjakan. Saya harus mengubah daftar saya menjadi paragraf dan memalsukan peluru.

Saya pikir bahkan solusi stop-gap yang mengabaikan gaya daftar yang lebih rumit dan mengimplementasikan hanya disc/square untuk daftar yang tidak berurutan akan berguna .... Saya akan mengikuti stop-gap itu dengan yang lain: dukungan dasar untuk daftar yang dipesan (belum mencoba pendekatan @ adam-roth, tetapi akan segera). KEMUDIAN, mungkin masuk ke gaya daftar yang lebih menarik ...

Ini tidak akan menjadi solusi yang bekerja untuk semua orang, tetapi ini adalah sesuatu yang telah saya gunakan dengan beberapa keberhasilan. Html2Canvas mendukung pemilih pseudoclass dengan baik jadi saya telah menambahkan kembali peluru dan angka dengan :before filter.

//Kode Ini SASS, tapi Anda bisa menulisnya dengan baik di css biasa.
//Anda juga dapat membuat sarang ol, ul untuk mengizinkan daftar bersarang (cukup tentukan posisi kiri baru untuk indentasi, dalam kasus kami, kami hanya menambahkan 30px per indentasi).

#whatever-element-html2canvas-is-run-on {
    ol, ul {
        li {
            &:before {
                position: absolute; //This way is doesn't effect sizing
                left: 30px; //Whatever indent level you need to match the bullet placement
                z-index: 1000; //This may not be necessary for you
            }
        }
    }
    ol {
        li {
            &:before {
                content: attr(data-number); //This along with the javascrip below will make ordered lists work.
            }
        }
    }
}

Kemudian saya menjalankan html apa pun yang ingin saya render melalui filter (Dalam kasus saya, filter sudut, tetapi Javascript apa pun akan berfungsi)

var filtered = $("<div>" + data + "</div");

//Add Numbers To Each of The OL Li's
filtered.find('ol')
    //Loop through each ol
    .each(function(i, el){
        console.log('i', i);
        $(el).children('li')
            //Loop through each of it's children and give it a data attribute for what number it should have
            .each(function(ci, cel){
                console.log('ci', ci);
                $(cel).attr('data-number', ci + 1);
            });
    });

Solusi yang saya posting sebelumnya tidak lagi berfungsi dengan versi html2canvas saat ini. Inilah solusi baru saya untuk masalah ini:

http://jsfiddle.net/e70o3mj0/2/

...pada dasarnya itu mengubah setiap 'ol' dan 'ul' menjadi kumpulan div. Operasi dapat dibatalkan setelah html2canvas berjalan.

Hanya ingin tahu apakah ini sedang dipertimbangkan, atau jika ada yang bisa saya lakukan untuk membantu memindahkan fitur ini.

Itu dipertimbangkan dan akan diterapkan di beberapa titik. PR #486 dibuat untuk itu, dan saya memberikan beberapa umpan balik tentangnya. Setelah itu diselesaikan, itu bisa digabung.

Adakah kemungkinan ini akan diselesaikan di html2canvas dalam waktu dekat?

Saya mencari "ul", "ol", "li" dalam kode dan tidak menemukan apa pun, namun li menjorok, jadi pasti ada logika untuk itu. Adakah yang bisa menunjukkan di mana ini akan ditempatkan dalam kode, jika sekarang ada di sana?

Ini pasti peretasan, tetapi saya dapat mendukung <ul> berpoin dalam PDF dengan pendekatan ini:

HTML
~~~

  • Ganti penghasilan Anda, dengan {{ output.monthlyIncome | mata uang }} cek bulanan
  • Bayar hipotek Anda hingga nol
  • Bayar hutang Anda sampai nol
  • Membayar 100% pendidikan anak-anak Anda di perguruan tinggi negeri atau universitas
  • Tetap terlindungi sampai pasangan/pasangan Anda berusia 65 tahun atau anak bungsu Anda berusia 23 tahun, mana saja yang lebih dulu

~~~

KURANG/CSS
~~~

pdf-kanvas ul {

list-style: none;
padding: 0;

}

pdf-kanvas ul li {

margin: 0 0 0 35px;
list-style: none;

.bullet {
    display: inline-block;
    opacity: 0.85;
    font-size: 1.1em;
    text-indent: -22px;
}

}
~~~

Di mana #pdf-canvas adalah nama DIV tersembunyi dengan template PDF di dalamnya. Semoga ini bisa membantu orang lain yang mencoba melakukan ini.

Saya menggunakan TinyMCE untuk mengedit, dan pengguna tidak boleh melihat "cara kerja bagian dalam", tetapi mungkin ada cara untuk memperpanjang sehingga rentang dan • dimasukkan, tetapi solusi 1-ke-1 yang tepat akan jauh lebih baik tentu saja.

Terima kasih,
Anders

Trik sederhana:

HTML
<ul><li>Item 1</li><li>Item 2</li></ul>

SCSS
ul li { list-style-type: none; &:before { content: '• '; margin-left: -1em; } }

Saya bertanya-tanya, mengapa ini tidak bisa diselesaikan di html2canvas?

Pendekatan saya untuk memotong ini adalah dengan membuat tabel dengan 2 kolom dan menempatkan • di kolom pertama dan teks di kolom kedua. Itu satu-satunya cara agar itu diberikan dengan benar

Saya menguji sekarang, dan daftar HTML berfungsi dengan baik di 1.0.0 alpha 10.

https://jsfiddle.net/boLxkgj8/264/ Saya tidak bisa membuat Bullet :( Bagaimana Anda bisa melakukannya

https://jsfiddle.net/boLxkgj8/264/ Saya tidak bisa membuat Bullet :( Bagaimana Anda bisa melakukannya

ok, Anda tidak menggunakan versi terbaru, sekarang sepertinya berfungsi:
https://jsfiddle.net/jeavhg05/4/

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

ABHIKSINGHH picture ABHIKSINGHH  ·  3Komentar

AlphaDu picture AlphaDu  ·  4Komentar

kunal886496 picture kunal886496  ·  3Komentar

yasergh picture yasergh  ·  5Komentar

diego-rey picture diego-rey  ·  3Komentar