編寫HTML進行轉換的提示

GrabzIt 的 API 可讓您轉換任何 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>

如果您想在要轉換的 HTML 中包含 JavaScript、圖像或 CSS，那麼您可以在內聯或引用莊園中提供這些資源。例如，下面的程式碼顯示如何以內聯方式在 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>

更多網頁捕獲文章社群問題