We are exporting our webpage to a PDF using RadClientExportManager. There are two <img> on the webpage, one is included in the downloaded PDF, but one is not on the PDF. The one that is on the PDF has it's "src" set in the HTML tag, and the image that is not showing up on the PDF has its source set in the code behind from an API call.
Image that is working:
<img src="~/Logo.png" runat="server" height="120" align="Right"/>Image that is not working:
HTML:
<img id="imgProfilePicture" runat="server" align="left"/>VB.net:
imgProfilePicture.Src = API_Call.SelectToken("e[10].image_url")
imgProfilePicture.Height = 120
Both images are visible on the website, just not on the downloaded PDF.
Any help would be appreciated, thank you.
Hi Ryan,
When dealing with exporting webpages to PDF using tools like RadClientExportManager, issues with images not appearing in the exported PDF can be attributed to a few common causes, especially when images are dynamically set through code behind. Here’s a detailed approach to troubleshoot and potentially solve the issue with the image not appearing in the PDF:
1. Path Resolution - First, ensure that the path resolved by the API call is correct and accessible from the client-side context in which the PDF export occurs. The RadClientExportManager might not be able to access or resolve server-side paths or URLs that are only accessible after server-side processing.
Solution: Convert the path returned from the API to an absolute URL that is accessible from the client side. You can modify the server-side code to output a full URL for the img src attribute. If the API returns a relative path, convert it to an absolute URL in your VB.NET code before setting it as the src attribute of the image.
Here’s a basic example of converting a relative path to an absolute one in VB.NET:
Dim relativePath As String = API_Call.SelectToken("e[10].image_url").ToString() Dim absolutePath As String = Request.Url.GetLeftPart(UriPartial.Authority) & VirtualPathUtility.ToAbsolute(relativePath) imgProfilePicture.Src = absolutePathThis code assumes API_Call.SelectToken("e[10].image_url") returns a relative path. Request.Url.GetLeftPart(UriPartial.Authority) gets the base URL of your application, and VirtualPathUtility.ToAbsolute(relativePath) converts the relative path to an absolute one.
2. Timing and JavaScript Execution
If the image source is set dynamically via JavaScript or as a result of an asynchronous API call, there might be a timing issue where the export occurs before the image source has been set.
Solution: Ensure the export action is triggered after all dynamic content has been fully loaded and rendered on the page. This might involve hooking into the completion of the API call or setting up a callback/event listener to trigger the export.
3. CORS (Cross-Origin Resource Sharing) Issues - If the image is hosted on a different domain from your webpage and the server does not have appropriate CORS headers set, the image might not be loaded due to security restrictions.
Solution: Ensure the server hosting the image includes CORS headers that allow the image to be loaded from your webpage's domain. Alternatively, host the image on the same domain or a domain where CORS is properly configured.
4. RadClientExportManager Limitations - check the list of limitations for the client export manager at https://docs.telerik.com/devtools/aspnet-ajax/controls/clientexportmanager/troubleshooting/known-limitations.
Debugging Steps: Use browser developer tools to inspect the network activity and ensure that the image request is made and succeeds. Also, check for JavaScript errors that might indicate issues with setting the image source. Inspect the image and its src and see what the generated URL is? Please also send us a screenshot for review.
In summary, verify the path and accessibility of the image, ensure timing and execution order are correct, consider CORS if applicable, and review any client-side restrictions or requirements by RadClientExportManager.