أدوات لالتقاط وتحويل الويب

نصائح حول كتابة HTML للتحويل

تسمح لك واجهة برمجة تطبيقات GrabzIt بتحويل أي HTML into PDF وDOCX والصور والمزيد. وللقيام بذلك، يتعين عليك تمرير HTML عادي إلى واجهة برمجة التطبيقات (API) الخاصة بنا. على سبيل المثال، شيء مثل HTML الموضح في المثال التالي.

<html>
<body>
<h1>Hello World</h1>
</body>
</html>

لاحظ أن مثال HTML هذا يتضمن علامتي HTML وBODY، ولكن هذا غير مطلوب إذا كنت تريد فقط تحويل مقتطف من HTML. ومع ذلك، إذا لم تقم بإضافة علامات HTML وBODY، فستتم إضافتها تلقائيًا لك تمامًا كما هو الحال في المتصفح العادي. لمواجهة ذلك، يمكنك تحديد بعض CSS لإزالة أي حشوة وهوامش إضافية على علامة BODY كما هو موضح أدناه.

<style>
body{margin:0;padding:0}
</style>

إذا كنت تريد تضمين JavaScript أو صور أو CSS في ملف HTML الذي ستقوم بتحويله، فيمكنك توفير هذه الموارد بشكل مضمّن أو مرجعي. على سبيل المثال، يوضح الكود أدناه كيفية إنشاء الموارد في HTML بطريقة مضمنة.

<html>
<head>
<script>
document.getElementsByTagName('H1')[0].innerText = 'Goodbye';
</script>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOV
SKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGA
iqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
<h1>Hello World</h1>
</body>
</html>

كما ترون في المثال أعلاه، يتم تضمين JavaScript وCSS مباشرة داخل صفحة HTML وكيف تم تحويل الصورة intالزراعة العضوية عنوان URL للبيانات.

إذا أردنا الإشارة إلى هذه الموارد بدلاً من ذلك، فسنحتاج إلى التأكد من أن جميع عناوين URL المرتبطة بهذه الملفات تستخدم عناوين URL المطلقة، والتي يمكن أيضًا الوصول إليها بشكل عام. وهذا يعني أن عنوان URL يحتوي على جميع المعلومات اللازمة لتحديد موقع المورد. عدم استخدام عناوين URL المطلقة هو السبب الرئيسي لم يتم عرض الصور وCSS وJavaScript عند تحويل HTML.

للقيام بذلك، يجب وضع JavaScript وCSS والصورة into قم بفصل الملفات ثم الإشارة إليها في HTML، والتي ستبدو مثل المثال أدناه.

<html>
<head>
<script src="http://www.example.com/myscript.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.example.com/mystyle.css">
</head>
<body>
<h1>Hello World</h1>
<img width="16" height="16" alt="star" src="http://www.example.com/star.gif" />
</body>
</html>