솔루션은 이론적으로 상당히 단순해야 합니다(단지 원). 그러나 솔루션이 무엇이든 간에 총알의 모양을 사용자 정의하기 위해 CSS를 고려해야 합니다. 말할 것도 없이 목록 항목은 목록처럼 보이지 않는 것들에 일반적으로 사용됩니다(예를 들어 "Code", "Network" 등이 있는 github 헤더는 ul이므로 목록 때문에 분명히 글머리 기호가 필요하지 않습니다. 스타일 유형: 없음

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

이것에 대한 소식이 있습니까? 내 앱에 이 기능이 정말 필요합니다. 누구든지 이것에 대한 아이디어/해결 방법이 있습니까? 아니면 누군가 그것을 구현하는 방법에 대한 정보를 줄 수 있습니까?

작동하지 않는다는 것을 증명하는 바이올린은 다음과 같습니다. http://jsfiddle.net/fYZ5h/

특히 정렬된 목록의 경우 이 문제가 해결되었으면 합니다.

편집: 정렬된 목록에 대해 숫자를 보는 데 관심이 있는 사람들을 위한 간단한 해결 방법이 있습니다. 이것은 'ol' 요소에서 'list-style-position' CSS 속성을 'inside'로 설정하는 한 작동합니다. 또한 'list-style-type'은 다음 정규식과 일치해야 합니다.

/^(십진수|십진수 선행 0|위 알파|위 라틴|위 로마자|낮은 알파|낮은 그리스어|낮은 라틴|낮은 로마자)$/i

...두 제약 조건이 모두 충족되는 한 숫자는 정렬된 목록에 대해 올바르게 렌더링됩니다. CSS를 사용하여 목록의 위치를 ​​조정하여 'list-style-position: inside;'의 영향을 보완할 수 있습니다. 레이아웃에 있습니다.

list-style-type square에 대한 해결 방법을 만들었습니다.

아마도 내 솔루션이 도움이 될 것입니다.

풀 리퀘스트: https://github.com/niklasvh/html2canvas/pull/417

정렬되지 않은 목록에서 글머리 기호를 렌더링하는 기능에 +1...

이것은 또한 내가 작업하고 있는 프로젝트에 매우 도움이 될 것입니다. 내 목록을 단락으로 변환하고 총알을 가짜로 만들어야 합니다.

더 복잡한 목록 스타일을 무시하고 순서가 지정되지 않은 목록에 대해 디스크/사각형만 구현하는 임시 해결책도 유용할 것이라고 생각합니다. @adam-roth의 접근 방식을 시도했지만 곧) . 그런 다음 더 멋진 목록 스타일을 얻을 수 있습니다 ...

이것은 모든 사람에게 효과가 있는 솔루션은 아니지만 여기에 제가 성공적으로 사용한 방법이 있습니다. Html2Canvas는 의사 클래스 선택기를 잘 지원하므로 :before 필터를 사용하여 글머리 기호와 숫자를 다시 추가했습니다.

//이 코드는 SASS이지만 일반 CSS로 잘 작성할 수 있습니다.
//중첩 목록을 허용하기 위해 ol, ul을 중첩할 수도 있습니다. 들여쓰기할 새 왼쪽 위치를 지정하기만 하면 됩니다. 이 경우 들여쓰기당 30px만 추가하면 됩니다.

#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.
            }
        }
    }
}

그런 다음 필터를 통해 렌더링하려는 html을 실행합니다(제 경우에는 각도 필터이지만 모든 Javascript가 작동함).

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);
            });
    });

이전에 게시한 해결 방법은 더 이상 현재 버전의 html2canvas에서 작동하지 않습니다. 이 문제에 대한 새로운 해결 방법은 다음과 같습니다.

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

...기본적으로 모든 'ol'과 'ul'을 div 컬렉션으로 변환합니다. html2canvas가 실행된 후에 작업을 취소할 수 있습니다.

이것이 고려되고 있는지 또는 이 기능을 진행하는 데 도움이 될 수 있는 일이 있는지 궁금합니다.

어느 시점에서 고려되고 구현될 것입니다. PR #486은 그것을 위해 만들어졌고, 나는 그것에 대해 약간의 피드백을 주었습니다. 일단 해결되면 병합될 수 있습니다.

이것이 가까운 장래에 html2canvas에서 해결될 가능성이 있습니까?

코드에서 "ul", "ol", "li"를 찾았지만 아무 것도 찾지 못했지만 li는 들여쓰기되어 있으므로 이에 대한 논리가 있어야 합니다. 코드에서 이것이 위치할 위치를 가리킬 수 있는 사람이 있습니까?

확실히 해킹이지만 이 접근 방식을 사용하여 PDF에서 글머리 기호 <ul> 를 지원할 수 있었습니다.

HTML
~~~

• • 수입을 {{ output.monthlyIncome | 통화 }} 월별 수표
• • 모기지론을 0으로 낮추십시오.
• • 부채를 0으로 줄이십시오.
• • 공립 대학에서 자녀 교육비 100% 지불
• • 배우자/파트너가 65세가 되거나 막내 자녀가 23세가 될 때까지 보장 유지

~~~

적게/CSS
~~~

pdf 캔버스 ul {

list-style: none;
padding: 0;

}

pdf-canvas ul li {

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

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

}
~~~

여기서 #pdf-canvas 는 PDF 템플릿이 포함된 숨겨진 DIV의 이름입니다. 이것이 이것을 시도하는 다른 사람에게 도움이되기를 바랍니다.

나는 편집을 위해 TinyMCE를 사용하고 사용자는 "내부 작동"을 볼 수 없어야하지만 범위 및 •가 삽입되도록 확장하는 방법이있을 수 있지만 적절한 1-1 솔루션이 훨씬 낫습니다. 물론.

감사 해요,
앤더스

간단한 트릭:

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

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

그런데 왜 이것이 html2canvas에서 해결되지 않는지 궁금합니다.

이것을 우회하는 나의 접근 방식은 2개의 열이 있는 테이블을 만들고 첫 번째 열에 • 텍스트를 두 번째 열에 넣는 것입니다. 그것이 올바르게 렌더링되는 유일한 방법이었습니다.

지금 테스트했으며 HTML 목록은 1.0.0 알파 10에서 제대로 작동합니다.

https://jsfiddle.net/boLxkgj8/264/ Bullet을 렌더링할 수 없습니다 :(어떻게 할 수 있습니까?

https://jsfiddle.net/boLxkgj8/264/ Bullet을 렌더링할 수 없습니다 :(어떻게 할 수 있습니까?

알겠습니다. 최신 버전을 사용하지 않았는데 이제 제대로 작동하는 것 같습니다.
https://jsfiddle.net/jeavhg05/4/