استخدم html2canvas لتحويل الصفحة إلى صورة وتنزيلها باستخدام Canvas2image

لقد وجدت سابقًا طريقة على الإنترنت للتنزيل باستخدام سمة التنزيل <a>، وهي بالفعل بسيطة ومريحة للغاية، لكن هذه الطريقة لا تدعم IE، لذلك لم يكن لدي خيار سوى العثور على طريقة أخرى.

النسخة المستخدمة في هذا المثال:

• [email protected]
• [email protected]

ثَبَّتَ

 تثبيت npm html2canvas Canvas2image - حفظ

يقدم

 استيراد html2canvas من 'html2canvas';require('./canvas2image.js');

يجب تعديل Canvas2image.js بحيث يمكن ربطه بالنافذة

 (وظيفة($){ Canvas2Image = function () { ... }}

يمكن استخدام _dataURL للتردد، وسوف يقوم Canvas2Image.saveAsPNG(canvas) بتنزيله مباشرة.

يوفر Canvas2Image الطرق التالية:

 Canvas2Image.saveAsImage(canvasObj، العرض، الارتفاع، النوع)Canvas2Image.saveAsPNG(canvasObj، العرض، الارتفاع)Canvas2Image.saveAsJPEG(canvasObj، العرض، الارتفاع)Canvas2Image.saveAsGIF(canvasObj، العرض، الارتفاع)Canvas2Image.saveAsBMP(canvasObj، العرض، الارتفاع)Canvas2Image.convertToImage(canvasObj، العرض، الارتفاع، النوع)Canvas2Image.convertToPNG(canvasObj، العرض، الارتفاع)Canvas2Image.convertToJPEG(canvasObj، العرض، الارتفاع)Canvas2Image.convertToGIF(canvasObj، العرض، الارتفاع)Canvas2Image.convertToBMP(canvasObj، عرض، ارتفاع)

في vue، يمكنك استخدام $refs لتحديد DOM؛

لون الخلفية: null، هذه الجملة يمكن أن تجعل الصورة المنقولة ليس لها حدود بيضاء

 الأساليب: { toImage() { Let _this = this; _this.dataURL = _dataURL;

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.