Xem phần mềm
Chụp nhanh một lần
Công cụ chụp màn hình Monosnap cho Mac và PC. Chụp ảnh màn hình, quay video và tải tệp trực tiếp lên đám mây. Chụp ảnh màn hình trong một cú nhấp chuột. Chia sẻ ảnh chụp màn hình và video để làm việc từ xa hiệu quả và rõ ràng hơn. Chụp toàn màn hình, khu vực hoặc cửa sổ. Tạo ảnh chụp màn hình pixel hoàn hảo,
Xem phần mềm
Chụp Nimbus
Hiển thị cho nhóm, khách hàng hoặc bạn bè của bạn chính xác những gì bạn đang thấy bằng các đoạn phim, video và ảnh chụp màn hình được ghi lại có thể được chú thích và chia sẻ ngay lập tức. Sử dụng Nimbus Capture để quay video toàn bộ màn hình nền hoặc tab trình duyệt của bạn hoặc tạo video bằng webcam của bạn. Chụp ảnh màn hình để
Tập lệnh cho phép bạn chụp "ảnh chụp màn hình" của các trang web hoặc một phần của nó, trực tiếp trên trình duyệt của người dùng. Ảnh chụp màn hình dựa trên DOM và do đó có thể không chính xác 100% so với hình ảnh đại diện thực vì nó không tạo ảnh chụp màn hình thực tế mà xây dựng ảnh chụp màn hình dựa trên thông tin có sẵn trên trang
Làm thế nào nó hoạt động?
Tập lệnh hiển thị trang hiện tại dưới dạng ảnh canvas, bằng cách đọc DOM và các kiểu khác nhau được áp dụng cho các phần tử
Nó không yêu cầu bất kỳ kết xuất nào từ máy chủ vì toàn bộ hình ảnh được tạo trên trình duyệt của khách hàng. Tuy nhiên do phụ thuộc nhiều vào trình duyệt nên thư viện này không phù hợp để sử dụng trong nodejs. Nó cũng không phá vỡ bất kỳ hạn chế chính sách nội dung trình duyệt nào một cách kỳ diệu, do đó, việc hiển thị nội dung có nhiều nguồn gốc sẽ yêu cầu proxy để đưa nội dung về cùng một nguồn gốc
Tập lệnh vẫn đang ở trạng thái rất thử nghiệm, vì vậy tôi khuyên bạn không nên sử dụng tập lệnh này trong môi trường sản xuất cũng như không bắt đầu xây dựng ứng dụng với tập lệnh này, vì vẫn sẽ có những thay đổi lớn được thực hiện
Tính tương thích của trình duyệt web
Thư viện sẽ hoạt động tốt trên các trình duyệt sau [với
$ git clone git://github.com/niklasvh/html2canvas.git
09 polyfill]- firefox 3. 5+
- Google Chrome
- Opera 12+
- IE9+
- Safari 6+
Vì mỗi thuộc tính CSS cần phải được tạo thủ công để được hỗ trợ nên có một số thuộc tính chưa được hỗ trợ
Cách sử dụng
Thư viện html2canvas sử dụng các
$ git clone git://github.com/niklasvh/html2canvas.git
09 và hy vọng chúng sẽ khả dụng trong ngữ cảnh toàn cầu. Nếu bạn muốn hỗ trợ vốn không hỗ trợ $ git clone git://github.com/niklasvh/html2canvas.git
09, vui lòng bao gồm một polyfill chẳng hạn như es6-promise trước khi bao gồm $ git clone git://github.com/niklasvh/html2canvas.git
12Để hiển thị một
$ git clone git://github.com/niklasvh/html2canvas.git
13 bằng html2canvas, chỉ cần gọi. $ git clone git://github.com/niklasvh/html2canvas.git
14Hàm trả về một Lời hứa chứa phần tử
$ git clone git://github.com/niklasvh/html2canvas.git
0. Chỉ cần thêm trình xử lý thực hiện lời hứa vào lời hứa bằng cách sử dụng $ git clone git://github.com/niklasvh/html2canvas.git
1html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
Xây dựng
Bạn có thể tải xuống các bản dựng đã sẵn sàng tại đây
Sao chép kho lưu trữ git
$ git clone git://github.com/niklasvh/html2canvas.git
Cài đặt phụ thuộc
$ npm install
Xây dựng gói trình duyệt
$ npm run build
ví dụ
Để biết thêm thông tin và ví dụ, vui lòng truy cập trang chủ hoặc dùng thử bảng điều khiển thử nghiệm
Đóng góp
Nếu bạn muốn đóng góp cho dự án, vui lòng gửi yêu cầu kéo đến nhánh phát triển. Trước khi gửi bất kỳ thay đổi nào, hãy thử và kiểm tra xem các thay đổi đó có hoạt động với tất cả các trình duyệt hỗ trợ không. Nếu một số thuộc tính CSS không được hỗ trợ hoặc không đầy đủ, vui lòng tạo các thử nghiệm thích hợp cho thuộc tính đó trước khi gửi bất kỳ thay đổi mã nào
Một thẻ đã tồn tại với tên chi nhánh được cung cấp. Nhiều lệnh Git chấp nhận cả tên thẻ và tên nhánh, vì vậy việc tạo nhánh này có thể gây ra hành vi không mong muốn. Bạn có chắc chắn muốn tạo nhánh này không?
html2pdf. js chuyển đổi bất kỳ trang web hoặc thành phần nào thành PDF có thể in hoàn toàn ở phía máy khách bằng cách sử dụng html2canvas và jsPDF
cảnh báo. Đã có một số vấn đề được báo cáo trong v0. 10. Chúng đang được điều tra nhưng trong thời gian chờ đợi, bạn có thể muốn tiếp tục sử dụng v0. 9. 3 [“^0. 9. 3” trong npm hoặc sử dụng cdnjs cho các thẻ tập lệnh HTML]
Mục lục
Bắt đầu
CDN
Cách đơn giản nhất để sử dụng html2pdf. js là đưa nó vào dưới dạng tập lệnh trong HTML của bạn bằng cách sử dụng cdnjs
Sử dụng URL CDN sẽ khóa bạn với một phiên bản cụ thể, điều này sẽ đảm bảo tính ổn định và cho phép bạn kiểm soát thời điểm thay đổi phiên bản. cdnjs cung cấp cho bạn quyền truy cập vào tất cả các phiên bản trước đây của html2pdf. js
Ghi chú. để biết thêm thông tin về cách sử dụng phiên bản chưa được đóng gói
0JS thô
Bạn cũng có thể tải xuống
1 trực tiếp vào thư mục dự án của mình và đưa nó vào HTML của bạn với
NPM
Cài đặt html2pdf. js và các phần phụ thuộc của nó bằng cách sử dụng NPM với
2 [đảm bảo bao gồm
3 trong tên gói]Ghi chú. Bạn có thể sử dụng NPM để tạo dự án của mình, nhưng html2pdf. js sẽ không chạy trong Node. js, nó phải chạy trên trình duyệt
người cúi đầu
Cài đặt html2pdf. js và các phần phụ thuộc của nó bằng cách sử dụng Bower với
4 [đảm bảo bao gồm
3 trong tên gói]Bảng điều khiển
Nếu bạn đang ở trên một trang web mà bạn không thể sửa đổi trực tiếp và muốn sử dụng html2pdf. js để chụp ảnh màn hình, bạn có thể làm theo các bước sau
- Mở bảng điều khiển của trình duyệt của bạn [hướng dẫn cho các trình duyệt khác nhau tại đây]
- Dán vào mã này
4$ git clone git://github.com/niklasvh/html2canvas.git
- Bây giờ bạn có thể thực thi html2pdf. js lệnh trực tiếp từ bàn điều khiển. Để chụp một tệp PDF mặc định của toàn bộ trang, hãy sử dụng
6
Cách sử dụng
Sau khi cài đặt, html2pdf. js đã sẵn sàng để sử dụng. Lệnh sau sẽ tạo tệp PDF của
7 và nhắc người dùng lưu kết quả$ git clone git://github.com/niklasvh/html2canvas.git
7Sử dụng nâng cao
Mỗi bước của html2pdf. js có thể định cấu hình, sử dụng API dựa trên Promise mới của nó. Nếu html2pdf. js được gọi mà không có đối số, nó sẽ trả về một đối tượng
8$ git clone git://github.com/niklasvh/html2canvas.git
9Nhân viên này có các phương thức có thể được xâu chuỗi tuần tự, khi mỗi Lời hứa giải quyết và cho phép chèn các chức năng trung gian của riêng bạn giữa các bước. Hệ thống điều kiện tiên quyết cho phép bạn bỏ qua các bước bắt buộc [như tạo canvas] mà không gặp bất kỳ sự cố nào
html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
0quy trình làm việc
Quy trình làm việc cơ bản của html2pdf. js [được thực thi bởi hệ thống prereq] là
html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
1API công nhân
MethodArgumentsDescriptionfromsrc, typeĐặt nguồn [chuỗi HTML hoặc thành phần] cho PDF. Tùy chọn
9 chỉ định các nguồn khác. $ git clone git://github.com/niklasvh/html2canvas.git
40, $ git clone git://github.com/niklasvh/html2canvas.git
41, $ git clone git://github.com/niklasvh/html2canvas.git
42 hoặc $ git clone git://github.com/niklasvh/html2canvas.git
43. totargetChuyển đổi nguồn thành mục tiêu đã chỉ định [$ git clone git://github.com/niklasvh/html2canvas.git
44, $ git clone git://github.com/niklasvh/html2canvas.git
42, $ git clone git://github.com/niklasvh/html2canvas.git
43 hoặc $ git clone git://github.com/niklasvh/html2canvas.git
47]. Mỗi mục tiêu cũng có phương thức $ git clone git://github.com/niklasvh/html2canvas.git
48 riêng có thể được gọi trực tiếp. $ git clone git://github.com/niklasvh/html2canvas.git
49, $ git clone git://github.com/niklasvh/html2canvas.git
70, $ git clone git://github.com/niklasvh/html2canvas.git
71 và $ git clone git://github.com/niklasvh/html2canvas.git
72. outputtype, options, srcRoutes sang phương thức $ git clone git://github.com/niklasvh/html2canvas.git
73 hoặc $ git clone git://github.com/niklasvh/html2canvas.git
74 thích hợp dựa trên $ git clone git://github.com/niklasvh/html2canvas.git
75 đã chỉ định [$ git clone git://github.com/niklasvh/html2canvas.git
47 [mặc định] hoặc $ git clone git://github.com/niklasvh/html2canvas.git
43]. outputPdftype, optionsGửi
9 và $ git clone git://github.com/niklasvh/html2canvas.git
79 tới phương thức $ git clone git://github.com/niklasvh/html2canvas.git
90 của đối tượng jsPDF và trả về kết quả dưới dạng Lời hứa [sử dụng $ git clone git://github.com/niklasvh/html2canvas.git
91 để truy cập]. Xem để biết thêm thông tin. outputImgtype, optionsTrả về kiểu dữ liệu được chỉ định cho hình ảnh dưới dạng Lời hứa [sử dụng $ git clone git://github.com/niklasvh/html2canvas.git
91 để truy cập]. Các loại được hỗ trợ. $ git clone git://github.com/niklasvh/html2canvas.git
43, $ git clone git://github.com/niklasvh/html2canvas.git
94/$ git clone git://github.com/niklasvh/html2canvas.git
95, và $ git clone git://github.com/niklasvh/html2canvas.git
96/$ git clone git://github.com/niklasvh/html2canvas.git
97. savefilenameLưu đối tượng PDF với tên tệp tùy chọn [tạo lời nhắc tải xuống của người dùng]. setoptĐặt các thuộc tính đã chỉ định. Xem dưới đây để biết thêm chi tiết. getkey, cbkTrả lại thuộc tính được chỉ định trong $ git clone git://github.com/niklasvh/html2canvas.git
98, dưới dạng Lời hứa [sử dụng $ git clone git://github.com/niklasvh/html2canvas.git
91 để truy cập] hoặc bằng cách gọi html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
00 nếu được cung cấp. thenonFulfills, phương thức onRejectedStandard Promise, với _____201 được liên kết lại với Worker và có thêm tính năng theo dõi tiến trình [xem bên dưới]. Lưu ý rằng $ git clone git://github.com/niklasvh/html2canvas.git
91 trả về một
8, là một phân lớp của Promise. thenCoreonFulFilled, phương thức onRejectedStandard Promise, với html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
01 được ràng buộc lại với Worker [không theo dõi tiến trình]. Lưu ý rằng html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
05 trả về một
8, là một phân lớp của Promise. thenExternalonFulfills, phương thức onRejectedTrue Promise. Sử dụng 'thoát' Chuỗi công nhân này - bạn sẽ không thể tiếp tục xâu chuỗi các phương thức Công nhân sau html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
07. bắt, bắtExternalonRejectedStandard Promise phương thức. html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
08 thoát khỏi Chuỗi công nhân - bạn sẽ không thể tiếp tục xâu chuỗi các phương thức Công nhân sau html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
09. errormsgGửi lỗi trong chuỗi Worker’s PromiseMột vài bí danh cũng được cung cấp để thuận tiện
Tùy chọn
html2pdf. js có thể được định cấu hình bằng tham số
html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
10 tùy chọn
4Tham số
html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
10 có các trường tùy chọn sauNameTypeDefaultDescriptionmarginnumber hoặc arrayhtml2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
12PDF margin [theo đơn vị jsPDF]. Có thể là một số duy nhất, html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
13 hoặc html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
14. filenamestringhtml2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
15Tên tệp mặc định của tệp PDF đã xuất. đối tượng ngắt tranghtml2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
16 Kiểm soát hành vi ngắt trang trên trang. Xem bên dưới. imageobjecthtml2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
17Loại hình ảnh và chất lượng được sử dụng để tạo PDF. Xem bên dưới. enableLink boolean html2canvas[document.body].then[function[canvas] {
document.body.appendChild[canvas];
}];
18Nếu được bật, các siêu liên kết PDF sẽ tự động được thêm vào đầu tất cả các thẻ neo. html2canvasobject_______219Tùy chọn cấu hình được gửi trực tiếp tới
40 [xem tại đây để biết cách sử dụng]. jsPDFobject_______219Các tùy chọn cấu hình được gửi trực tiếp tới
42 [xem tại đây để biết cách sử dụng]ngắt trang
html2pdf. js có khả năng tự động thêm ngắt trang để dọn sạch tài liệu của bạn. Ngắt trang có thể được thêm vào theo kiểu CSS, đặt trên các thành phần riêng lẻ bằng cách sử dụng bộ chọn hoặc tránh ngắt bên trong tất cả các thành phần [chế độ
43]Theo mặc định, html2pdf. js sẽ tôn trọng hầu hết các quy tắc CSS
44,
45 và
46, đồng thời thêm dấu ngắt trang sau bất kỳ phần tử nào có lớp
47 [dành cho mục đích kế thừa]Cài đặt ngắt trang
SettingTypeDefaultDescriptionmodestring hoặc array
48Chế độ tự động thêm dấu ngắt trang. Một hoặc nhiều
49,
40 và
41. beforestring hoặc array
42CSS selectors để thêm ngắt trang trước mỗi phần tử. Có thể là một phần tử cụ thể có ID [
43], tất cả các phần tử thuộc một loại [e. g. $ git clone git://github.com/niklasvh/html2canvas.git
43], tất cả của một lớp [
45] hoặc thậm chí
46 để khớp với mọi phần tử. chuỗi sau hoặc mảng
42Giống như 'trước', nhưng thêm dấu ngắt trang ngay sau phần tử. chuỗi tránh hoặc mảng
42Giống như 'trước', nhưng tránh ngắt trang trên các phần tử này. Bạn có thể bật tính năng này trên mọi phần tử bằng chế độ 'tránh tất cả'Chế độ ngắt trang
ModeDescriptionavoid-all Tự động thêm ngắt trang để tránh chia tách các phần tử trên các trang. cssThêm ngắt trang theo các thuộc tính CSS
44,
45 và
46. Chỉ nhận dạng
62 cho trước/sau và
63 cho bên trong. kế thừa Thêm ngắt trang sau các phần tử có lớp
47. Tính năng này có thể bị xóa trong tương laiVí dụ sử dụng
4Loại và chất lượng hình ảnh
Bạn có thể tùy chỉnh loại hình ảnh và chất lượng được xuất từ canvas bằng cách đặt tùy chọn
65. Đây phải là một đối tượng có các trường sauNameTypeDefaultDescriptiontypestring‘jpeg’Loại hình ảnh. HTMLCanvasElement chỉ hỗ trợ ‘png’, ‘jpeg’ và ‘webp’ [trên Chrome]. số lượng0. 95Chất lượng hình ảnh, từ 0 đến 1. Cài đặt này chỉ được sử dụng cho jpeg/webp [không phải png]Các tùy chọn này được giới hạn trong các cài đặt có sẵn cho HTMLCanvasElement. toDataURL[], bỏ qua cài đặt chất lượng cho hình ảnh ‘png’. Để bật tính năng nén hình ảnh png, hãy thử sử dụng miếng đệm nén canvas-png, đây sẽ là giải pháp tại chỗ để bật tính năng nén png thông qua tùy chọn
66theo dõi tiến độ
Đối tượng Worker được trả về bởi
67 có cơ chế theo dõi tiến trình được tích hợp sẵn. Nó sẽ được cập nhật để cho phép gọi lại tiến trình sẽ được gọi với mỗi lần cập nhật, tuy nhiên, nó hiện đang được tiến hànhphụ thuộc
html2pdf. js phụ thuộc vào các gói bên ngoài html2canvas, jsPDF và es6-promise. Các phụ thuộc này được tải tự động khi sử dụng NPM hoặc gói đi kèm
Nếu sử dụng
68 chưa được nhóm [hoặc phiên bản chưa được rút gọn của nó], bạn cũng phải bao gồm từng phần phụ thuộc. Thứ tự rất quan trọng, nếu không html2canvas sẽ bị ghi đè bởi triển khai nội bộ của chính jsPDF
6Đóng góp
Vấn đề
Khi gửi một vấn đề, vui lòng cung cấp mã có thể tái sản xuất làm nổi bật vấn đề, tốt nhất là bằng cách tạo một nhánh của mẫu jsFiddle này [có html2pdf. js đã được tải]. Hãy nhớ rằng html2pdf. js sử dụng html2canvas và jsPDF làm phụ thuộc, vì vậy, bạn nên kiểm tra từng trình theo dõi vấn đề của các kho lưu trữ đó để xem vấn đề của bạn đã được xử lý chưa
Các vấn đề đã biết
- kết xuất. Công cụ kết xuất html2canvas không hoàn hảo [mặc dù nó khá tốt. ]. Nếu html2canvas không hiển thị chính xác nội dung của bạn thì tôi không thể sửa lỗi đó
- Bạn có thể kiểm tra điều này bằng thứ gì đó giống như câu đố này, để xem liệu có vấn đề gì trong quá trình tạo canvas không
- Nhân bản nút [CSS, v.v.]. Cách html2pdf. js sao chép nội dung của bạn trước khi gửi tới html2canvas bị lỗi. Bản sửa lỗi hiện đang được phát triển - hãy dùng thử
- Thay đổi kích thước. Hiện tại, html2pdf. js thay đổi kích thước phần tử gốc để phù hợp với trang PDF [làm cho nội dung bên trong "chỉnh lại dòng"]
- Đây thường là hành vi mong muốn, nhưng không phải lúc nào
- Có kế hoạch thêm hành vi thay thế [e. g. “shrink-to-page”], nhưng chưa có gì sẵn sàng để thử nghiệm
- dự án liên quan. Tính năng. PDF một trang
- Kết xuất dưới dạng hình ảnh. html2pdf. js hiển thị tất cả nội dung thành một hình ảnh, sau đó đặt hình ảnh đó vào PDF
- Điều này có nghĩa là văn bản không thể chọn hoặc tìm kiếm được và gây ra kích thước tệp lớn
- Điều này hiện không thể tránh khỏi, tuy nhiên những cải tiến gần đây trong jsPDF có nghĩa là có thể sớm hiển thị trực tiếp thành đồ họa vector
- dự án liên quan. Tính năng. trình kết xuất mới
- Cuộc đụng độ hứa hẹn. html2pdf. js dựa trên hành vi Promise cụ thể và có thể không thành công khi được sử dụng với các thư viện Promise tùy chỉnh
- Kích thước tối đa. Canvas HTML5 có chiều cao/chiều rộng tối đa. Mọi thứ lớn hơn sẽ không hiển thị được
- Đây là một hạn chế của chính HTML5 và dẫn đến các tệp PDF lớn hiển thị hoàn toàn trống trong html2pdf. js
- Trình kết xuất canvas jsPDF [được đề cập trong Sự cố đã biết #4] có thể khắc phục sự cố này
- dự án liên quan. Vá lỗi. Kích thước canvas tối đa
bài kiểm tra
html2pdf. js hiện đang rất thiếu các bài kiểm tra đơn vị. Mọi đóng góp hoặc đề xuất về các bài kiểm tra tự động [hoặc thủ công] đều được hoan nghênh. Đây là cao trên danh sách việc cần làm cho dự án này
Yêu cầu kéo
Nếu bạn muốn tạo một tính năng mới hoặc sửa lỗi, vui lòng rẽ nhánh và gửi yêu cầu kéo. Tạo một rẽ nhánh, tách nhánh của
69 và thực hiện các thay đổi đối với các tệp
00 [thay vì trực tiếp tới
01]. Bạn có thể kiểm tra các thay đổi của mình bằng cách xây dựng lại với
02