|
| 1 | +--- |
| 2 | +title: Convert HTML to PDF in in Google App Engine| Syncfusion |
| 3 | +description: Learn how to convert HTML to PDF in in the Google App Engine using Syncfusion .NET Core PDF library without the dependency of Adobe Acrobat. |
| 4 | +platform: document-processing |
| 5 | +control: PDF |
| 6 | +documentation: UG |
| 7 | +keywords: google app engine save pdf, app engine load pdf, c# save pdf, c# load pdf |
| 8 | +--- |
| 9 | + |
| 10 | +# Convert HTML to PDF in Google App Engine |
| 11 | + |
| 12 | +The Syncfusion<sup>®</sup> [HTML to PDF converter](https://www.syncfusion.com/document-sdk/net-pdf-library/html-to-pdf) is a .NET library for converting webpages, SVG, MHTML, and HTML to PDF using C#. Using this library, you can convert HTML to PDF using C# with Blink rendering engine in Google App Engine. |
| 13 | + |
| 14 | +## Set up App Engine |
| 15 | + |
| 16 | +Step 1: Open the **Google Cloud Console** and click the **Activate Cloud Shell** button. |
| 17 | + |
| 18 | + |
| 19 | +Step 2: Click the **Cloud Shell Editor** button to view the **Workspace**. |
| 20 | + |
| 21 | + |
| 22 | +Step 3: Open **Cloud Shell Terminal**, and run the following **command** to confirm authentication. |
| 23 | +{% tabs %} |
| 24 | +{% highlight c# tabtitle="CLI" %} |
| 25 | + |
| 26 | +gcloud auth list |
| 27 | + |
| 28 | +{% endhighlight %} |
| 29 | +{% endtabs %} |
| 30 | + |
| 31 | + |
| 32 | + |
| 33 | +Step 4: Click the **Authorize** button. |
| 34 | + |
| 35 | + |
| 36 | +## Create an application for App Engine |
| 37 | + |
| 38 | +Step 1: Open Visual Studio and select the ASP.NET Core Web app (Model-View-Controller) template. |
| 39 | + |
| 40 | + |
| 41 | +Step 2: Install the [Syncfusion.HtmlToPdfConverter.Net.Linux](https://www.nuget.org/packages/Syncfusion.HtmlToPdfConverter.Net.Linux/) NuGet package as a reference to your .NET Core application [NuGet.org](https://www.nuget.org/). |
| 42 | + |
| 43 | + |
| 44 | +N> Starting with v16.2.0.x, if you reference Syncfusion<sup>®</sup> assemblies from the trial setup or from the NuGet feed, you also have to add the "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to learn about registering the Syncfusion<sup>®</sup> license key in your application to use our components. |
| 45 | + |
| 46 | +Step 5: Include the following namespaces in the **HomeController.cs** file. |
| 47 | + |
| 48 | +{% tabs %} |
| 49 | +{% highlight c# tabtitle="C#" %} |
| 50 | + |
| 51 | +using Syncfusion.HtmlConverter; |
| 52 | +using Syncfusion.Pdf; |
| 53 | +using System.IO; |
| 54 | + |
| 55 | +{% endhighlight %} |
| 56 | +{% endtabs %} |
| 57 | + |
| 58 | +Step 6: A default action method named Index will be present in HomeController.cs. Right click on Index method and select **Go To View** where you will be directed to its associated view page **Index.cshtml**. |
| 59 | + |
| 60 | +Step 7: Add a new button in the Index.cshtml as shown in the following. |
| 61 | + |
| 62 | +{% tabs %} |
| 63 | +{% highlight c# tabtitle="C#" %} |
| 64 | + |
| 65 | +@{Html.BeginForm("CreateDocument", "Home", FormMethod.Get); |
| 66 | + { |
| 67 | + <div> |
| 68 | + <input type="submit" value="Convert HTML to PDF" style="width:200px;height:27px" /> |
| 69 | + </div> |
| 70 | + } |
| 71 | + Html.EndForm(); |
| 72 | +} |
| 73 | +{% endhighlight %} |
| 74 | +{% endtabs %} |
| 75 | + |
| 76 | +Step 6: Add a new action method in HomeController.cs and include the below code example to convert HTML to PDF document using [Convert](https://help.syncfusion.com/cr/document-processing/Syncfusion.HtmlConverter.HtmlToPdfConverter.html#Syncfusion_HtmlConverter_HtmlToPdfConverter_Convert_System_String_) method in [HtmlToPdfConverter](https://help.syncfusion.com/cr/document-processing/Syncfusion.HtmlConverter.HtmlToPdfConverter.html) class. |
| 77 | + |
| 78 | +{% tabs %} |
| 79 | +{% highlight c# tabtitle="C#" %} |
| 80 | + |
| 81 | +public ActionResult ExportToPDF() |
| 82 | +{ |
| 83 | +//Initialize HTML to PDF converter. |
| 84 | +HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(); |
| 85 | + |
| 86 | +//Convert URL to PDF document. |
| 87 | +using (PdfDocument document = htmlConverter.Convert("https://www.google.com")) |
| 88 | +{ |
| 89 | + //Save a PDF document. |
| 90 | + document.Save("Output.pdf"); |
| 91 | +} |
| 92 | +} |
| 93 | +{% endhighlight %} |
| 94 | +{% endtabs %} |
| 95 | + |
| 96 | +## Move application to App Engine |
| 97 | + |
| 98 | +Step 1: Open the **Cloud Shell editor**. |
| 99 | + |
| 100 | + |
| 101 | + |
| 102 | +Step 2: Drag and drop the sample from your local machine to **Workspace**. |
| 103 | + |
| 104 | + |
| 105 | + |
| 106 | +N> If you have your sample application in your local machine, drag and drop it into the Workspace. If you created the sample using the Cloud Shell terminal command, it will be available in the Workspace. |
| 107 | + |
| 108 | +Step 3: Open the Cloud Shell Terminal and run the following **command** to view the files and directories within your **current Workspace**. |
| 109 | + |
| 110 | +{% tabs %} |
| 111 | +{% highlight c# tabtitle="C#" %} |
| 112 | + |
| 113 | +ls |
| 114 | + |
| 115 | +{% endhighlight %} |
| 116 | +{% endtabs %} |
| 117 | + |
| 118 | +This will show the list of files and folders in workspace. Navigate to which sample you want run. |
| 119 | + |
| 120 | +Step 4: Run the following **command** to navigate which sample you want to run. |
| 121 | + |
| 122 | +{% tabs %} |
| 123 | +{% highlight c# tabtitle="C#" %} |
| 124 | + |
| 125 | +cd HtmlToPDFSample |
| 126 | + |
| 127 | +{% endhighlight %} |
| 128 | +{% endtabs %} |
| 129 | + |
| 130 | +Step 5: To ensure that the sample is working correctly, please run the application using the following command. |
| 131 | + |
| 132 | +{% tabs %} |
| 133 | +{% highlight c# tabtitle="C#" %} |
| 134 | + |
| 135 | +dotnet run --urls=http://localhost:8080 |
| 136 | + |
| 137 | +{% endhighlight %} |
| 138 | +{% endtabs %} |
| 139 | + |
| 140 | + |
| 141 | + |
| 142 | +Step 6: Verify that the application is running properly by accessing the **Web View -> Preview on port 8080**. |
| 143 | + |
| 144 | + |
| 145 | + |
| 146 | +Step 7: Now you can see the sample output on the preview page. |
| 147 | + |
| 148 | + |
| 149 | + |
| 150 | +Step 8: Close the preview page and return to the terminal then press **Ctrl+C** for which will typically stop the process. |
| 151 | + |
| 152 | + |
| 153 | + |
| 154 | +## Publish the application |
| 155 | + |
| 156 | +Step 1: Run the following command in the **Cloud Shell Terminal** to publish the application. |
| 157 | + |
| 158 | +{% tabs %} |
| 159 | +{% highlight c# tabtitle="C#" %} |
| 160 | + |
| 161 | +dotnet publish -c Release |
| 162 | + |
| 163 | +{% endhighlight %} |
| 164 | +{% endtabs %} |
| 165 | + |
| 166 | + |
| 167 | + |
| 168 | +Step 2: Run the following command in the **Cloud Shell Terminal** to navigate to the publish folder. |
| 169 | + |
| 170 | +{% tabs %} |
| 171 | +{% highlight c# tabtitle="C#" %} |
| 172 | + |
| 173 | +cd bin/Release/net8.0/publish/ |
| 174 | + |
| 175 | +{% endhighlight %} |
| 176 | +{% endtabs %} |
| 177 | + |
| 178 | + |
| 179 | + |
| 180 | +## Configure app.yaml and docker file |
| 181 | + |
| 182 | +Step 1: Add the app.yaml file to the publish folder with the following contents. |
| 183 | + |
| 184 | +{% tabs %} |
| 185 | +{% highlight c# tabtitle="C#" %} |
| 186 | + |
| 187 | +cat <<EOT >> app.yaml |
| 188 | +env: flex |
| 189 | +runtime: custom |
| 190 | +EOT |
| 191 | + |
| 192 | +{% endhighlight %} |
| 193 | +{% endtabs %} |
| 194 | + |
| 195 | + |
| 196 | + |
| 197 | + |
| 198 | +Step 2: Add the Docker file to the publish folder with the following contents. |
| 199 | + |
| 200 | +{% tabs %} |
| 201 | +{% highlight c# tabtitle="C#" %} |
| 202 | + |
| 203 | +cat <<EOT >> Dockerfile |
| 204 | +FROM mcr.microsoft.com/dotnet/aspnet:8.0 |
| 205 | +RUN apt-get update && \ |
| 206 | +apt-get install -yq --no-install-recommends \ |
| 207 | +libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \ |
| 208 | +libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \ |
| 209 | +libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 \ |
| 210 | +libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \ |
| 211 | +libnss3 libgbm1 |
| 212 | + |
| 213 | +ADD / /app |
| 214 | +EXPOSE 8080 |
| 215 | +ENV ASPNETCORE_URLS=http://*:8080 |
| 216 | +WORKDIR /app |
| 217 | +ENTRYPOINT [ "dotnet", "HtmlToPDFSample.dll"] |
| 218 | +EOT |
| 219 | + |
| 220 | +{% endhighlight %} |
| 221 | +{% endtabs %} |
| 222 | + |
| 223 | + |
| 224 | + |
| 225 | +Step 3: You can ensure **Docker** and **app.yaml** files are added in **Workspace**. |
| 226 | + |
| 227 | + |
| 228 | + |
| 229 | +## Deploy to App Engine |
| 230 | + |
| 231 | +Step 1: To deploy the application to the App Engine, run the following command in Cloud Shell Terminal. Afterwards, retrieve the **URL** from the Cloud Shell Terminal. |
| 232 | + |
| 233 | +{% tabs %} |
| 234 | +{% highlight c# tabtitle="C#" %} |
| 235 | + |
| 236 | +gcloud app deploy --version v0 |
| 237 | + |
| 238 | +{% endhighlight %} |
| 239 | +{% endtabs %} |
| 240 | + |
| 241 | + |
| 242 | + |
| 243 | + |
| 244 | +Step 2: Open the **URL** to access the application, which has been successfully deployed. |
| 245 | + |
| 246 | + |
| 247 | + |
| 248 | +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/html-to-pdf-csharp-examples/tree/master/HtmlToPdf/HtmlToPDFSample). |
| 249 | + |
| 250 | +By executing the program, you will get the **PDF document** as follows. The output will be saved in the **bin folder**. |
| 251 | + |
| 252 | + |
| 253 | + |
| 254 | +Click [here](https://www.syncfusion.com/document-sdk/net-pdf-library/html-to-pdf) to explore the rich set of Syncfusion<sup>®</sup> HTML to PDF converter library features. |
| 255 | + |
| 256 | + |
| 257 | + |
| 258 | + |
| 259 | + |
0 commit comments