How can word file displayed in a div container be printed in a pdf format?

Donald Symmons 2,881

I am trying to have a single page that will can be used to display either a word (.doc/.docx) or a PDF file. Instead of having two pages, each for word and pdf files. It’s a success but printing either of these formats in PDF is where I have issues.

After inserting a word or pdf file into my database table and redirect to another page, the word/pdf file is displayed on the redirected page. On the page, there is a div container that the word or pdf file will be displayed in. I want to learn how to print the file in PDF that displays there regardless of the format (whether it’s a .doc, .docx or .pdf file that displays in there).

Here is the HTML with the div container that displays word or pdf files


<div class="col-sm-10" style="width: 100%; padding: 10px; margin: 0 auto;">
                        <div class="col-sm-10" style="margin: 0 auto; padding: 6px;">
                            <div class="container-fluid" id="card" style="width: 100%; height: 100%; margin: 0 auto; border: 1px solid #e4e7e8;">
                                <div id="parent" style="margin: 0 auto; display: flex; position: center; width: 100%;">
                                    <div class="contentt" runat="server" id="DivContent" style="margin: 0 auto;">
                                        <div id="dvContainer" runat="server" style="margin: 0 auto;"></div>
                                         <asp:Image ID="Image1" runat="server" ImageUrl="TesingImg.jpg" BorderStyle="None" Width="80px" Height="80px" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <asp:Button ID="Downloadbtn" Text="Download" runat="server"/>
                    </div>

This is how the file is being selected from the database using Web method static object, GetFile().

        [WebMethod(EnableSession = true)]
        public static object GetFile()
        {
            try
            {
                string fileName = String.Empty;
                byte[] bytes = null;
                string type = string.Empty;
                string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
                using (SqlConnection con = new SqlConnection(connectionString))
                {
                    using (SqlCommand cmd = new SqlCommand("SELECT * FROM DocumentTable WHERE Id = @Id", con))
                    {
                        cmd.Parameters.AddWithValue("@Id", HttpContext.Current.Session["DocumentID"]);
                        con.Open();
                        using (SqlDataReader dr = cmd.ExecuteReader())
                        {
                            if (dr.Read())
                            {
                                fileName = dr["Name"].ToString();
                                bytes = (byte[])dr["Data"];
                                type = dr["ContentType"].ToString();
                            }
                        }
                        con.Close();
                    }
                }
                return new { Name = fileName, Data = bytes, ContentType = type };
            }
            catch (SqlException ex)
            {
                string msg = "Error:";
                msg += ex.Message;
                throw new Exception(msg);
            }
        }

Plugins

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    <script type="text/javascript" src="https://volodymyrbaydalka.github.io/docxjs/dist/docx-preview.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.18/mammoth.browser.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf_viewer.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
    <script src="~/js/bootstrap.min.js"></script>
    <script src="~/docx-preview.min.js"></script>
    <script src="~/js/docx-preview.js"></script>
    <script type="text/javascript" src="~/Scripts/docx-preview.js"></script>

Javascript function that displays the file (.doc, .docx or .pdf) on the page.

<script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "2.aspx/GetFile",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    if (r.d.ContentType != 'application/pdf') {
                        var doc = new File([new Uint8Array(r.d.Data)], r.d.ContentType);
                        if (doc != null) {
                            var docxOptions = Object.assign(docx.defaultOptions, {
                                useMathMLPolyfill: true
                            });
                            var container = document.querySelector("#dvContainer");
                            container.innerHTML = "";
                            docx.renderAsync(doc, container, null, docxOptions);
                        }
                    }
                    else {
                        LoadPdfFromBlob(r.d.Data);
                    }
                }
            });
        });

        var pdfjsLib = window['pdfjs-dist/build/pdf'];
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
        var pdfDoc = null;
        var scale = 1;
        var resolution = 1;

        function LoadPdfFromBlob(blob) {
            pdfjsLib.getDocument({ data: blob }).promise.then(function (pdfDoc_) {
                pdfDoc = pdfDoc_;
                var pdf_container = document.getElementById("dvContainer");
                pdf_container.innerHTML = "";
                pdf_container.style.display = "block";
                for (var i = 1; i <= pdfDoc.numPages; i++) {
                    RenderPage(pdf_container, i);
                }
            });
        };
        function RenderPage(pdf_container, num) {
            pdfDoc.getPage(num).then(function (page) {
                var canvas = document.createElement('canvas');
                canvas.id = 'pdf-' + num;
                ctx = canvas.getContext('2d');
                pdf_container.appendChild(canvas);

                var spacer = document.createElement("div");
                spacer.style.height = "20px";
                pdf_container.appendChild(spacer);

                var viewport = page.getViewport({ scale: scale });
                canvas.height = resolution * viewport.height;
                canvas.width = resolution * viewport.width;

                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport,
                    transform: [resolution, 0, 0, resolution, 0, 0]
                };

                page.render(renderContext);
            });
        };
    </script>

I tried to enclose the div container in a printpanel and use this pdf print method to print but it did not work. Please how can I do this?

<asp:Panel ID="Panel1" runat="server">
                                        <div class="contentt" runat="server" id="DivContent" style="margin: 0 auto;">
                                            <div id="dvContainer" runat="server" style="margin: 0 auto;"></div>
                                            <asp:Image ID="Image1" runat="server" BorderStyle="None" Width="80px" Height="80px" />
                                        </div>
                                    </asp:Panel>

<asp:Button ID="Downloadbtn" Text="Download" runat="server" OnClick="Downloadbtn_Click"/>

There is an image control also in the div tag. the image control can be moved to change position dynamically to anywhere in the div an be printed along with the word/pdf file.

Here is the javascript that aids in moving the image control to a desired location in the div tag

<script type="text/javascript">
        var dragItem = document.querySelector("#Image1");
        var container = document.querySelector("#subpage");

        var active = false;
        var currentX;
        var currentY;
        var initialX;
        var initialY;
        var xOffset = 0;
        var yOffset = 0;

        document.addEventListener("touchstart", dragStart, false);
        document.addEventListener("touchend", dragEnd, false);
        document.addEventListener("touchmove", drag, false);

        document.addEventListener("mousedown", dragStart, false);
        document.addEventListener("mouseup", dragEnd, false);
        document.addEventListener("mousemove", drag, false);

        function dragStart(e) {
            if (e.type === "touchstart") {
                initialX = e.touches[0].clientX - xOffset;
                initialY = e.touches[0].clientY - yOffset;
            } else {
                initialX = e.clientX - xOffset;
                initialY = e.clientY - yOffset;
            }

            if (e.target === dragItem) {
                active = true;
            }
        }

        function dragEnd(e) {
            initialX = currentX;
            initialY = currentY;
            active = false;
        }

        function drag(e) {
            if (active) {

                e.preventDefault();

                if (e.type === "touchmove") {
                    currentX = e.touches[0].clientX - initialX;
                    currentY = e.touches[0].clientY - initialY;
                } else {
                    currentX = e.clientX - initialX;
                    currentY = e.clientY - initialY;
                }

                xOffset = currentX;
                yOffset = currentY;

                setTranslate(currentX, currentY, dragItem);
            }
        }

        function setTranslate(xPos, yPos, el) {
            el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }
    </script>

PDF Printing

protected void Downloadbtn_Click(object sender, EventArgs e)
        {
            Response.ContentType = "Application/pdf";
            Response.AddHeader("Content-Disposition", "Attachment; filename=Document.pdf");
            Response.Cache.SetCacheability(HttpCacheability.NoCache);
            StringWriter StringWriter = new StringWriter();
            HtmlTextWriter hw = new HtmlTextWriter(StringWriter);
            DivContent.RenderControl(hw);
            Document doc = new Document(PageSize.A4,50f,50f,100f,30f);
            HTMLWorker htw = new HTMLWorker(doc);
            PdfWriter.GetInstance(doc, Response.OutputStream);
            doc.Open();
            StringReader sr = new StringReader(StringWriter.ToString());
            htw.Parse(sr);
            doc.Close();Response.Write(doc);
            Response.End();
        }
        public override void VerifyRenderingInServerForm(Control control)
        {
            /* Verifies that the control is rendered */
        }

QiYou-MSFT 4,321 Microsoft Vendor

Hi @Donald Symmons

Do you mean to put a doc file or image in a "div" and print it?

In fact, I think you can first put these files into a preview feature.

If you need to print these files as pdf. You can write a background method to convert to PDF.

Of course, the premise of my use of this method is that you are not on the server side and have office installed locally.

Code:

public static void WordToPDF(string sourcePath, string targetPath)

        {


            Application application = new Application();

            Document document = null;

            try

            {

                application.Visible = false;

                document = application.Documents.Open(sourcePath);

                document.ExportAsFixedFormat(targetPath, WdExportFormat.wdExportFormatPDF);

                

            }

            catch (Exception e)

            {

                Console.WriteLine(e.Message);

               

            }

            finally

            {

                document.Close();

            }

            
        }

protected void Button1_Click(object sender, EventArgs e)
        {
            WordToPDF("C:\\Users\\Administrator\\Desktop\\WordTest.docx", "C:\\Users\\Administrator\\Desktop\\Test\\ABC.PDF");
        }

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
   <asp:Button  ID="Button1" runat="server" OnClick="Button1_Click" Text="WordToPdf"/>
</asp:Content>

Test3

Best Regards

Qi You

Donald Symmons 2,881

Hi @QiYou-MSFT ,

Do you mean to put a doc file or image in a "div" and print it?

It's both doc file and image (the image happens to contain a QR code, but I did not include it in my code because I am more concern to printing the doc and image in pdf formats. I only had to put an image control there, so when the print is successful in pdf, whatevere image is there will also be printed in pdf). The doc file is saved in the database with its datatype as varbinary(MAX). Then on redirecting to the page it is previewed in a "div" tag. That's where I want to print it as pdf. Of course if you take a look at the java script you'll see that a the div tag also can contain a pdf gotten from database with the same datatype.

In fact, I think you can first put these files into a preview feature. If you need to print these files as pdf. You can write a background method to convert to PDF. Of course, the premise of my use of this method is that you are not on the server side and have office installed locally.

From your statement, do you mean that when the doc and image inside the "div" display, there should be a button that when clicked will convert both files into pdf preview for printing?

protected void Button1_Click(object sender, EventArgs e)
        {
            WordToPDF("C:\\Users\\Administrator\\Desktop\\WordTest.docx", "C:\\Users\\Administrator\\Desktop\\Test\\ABC.PDF");
        }

May I please ask for a bit of an explanation here, I don't understand the location string used above. Is it saving the file as pdf in the user's machine?

I would love clarity and/or a another way, maybe saving in a folder in the remote server. Just my thought though.

Just like in this code below; it is used for printing HTML controls, image controls in pdf formats. The images are first saved in the server MapPath, then after the panel has been printed, the images are deleted from the server. It works, but of course this is for HTML control and images. But in this question, its .doc,.docx and pdf files that will be displayed in the "div" tag on the page.

This is the printing of HTML controls (like labels etc.) and images I mentioned above.

protected void Button3_Click(object sender, EventArgs e)
        {
            try
            {
                string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
                using (SqlConnection con = new SqlConnection(connectionString))
                {
                    using (SqlCommand cmd = new SqlCommand("SELECT * FROM DocumentTable WHERE Id =@Id", con))
                    {
                        cmd.Parameters.AddWithValue("@Id", lblprefix.Text);
                        con.Open();
                        SqlDataReader dr = cmd.ExecuteReader();
                        if (dr.Read())
                        {
                            byte[] image = (byte[])dr["logo"];
                            imgFileUpload.ImageUrl = "data:image/jpeg;base64," + Convert.ToBase64String(image);

                            byte[] bytes = (byte[])dr["signature"];
                            Image2.ImageUrl = "data:image/jpeg;base64," + Convert.ToBase64String(bytes);

			     //I commented here because it is not the main issue
                         //   byte[] QRBytes = GetQRCodeBytes(ToAbsoluteUrl("~/Documents.aspx") + "?Id=" + Request.QueryString["Id"]);
                         //   Image1.ImageUrl = "data:image/jpg;base64," + Convert.ToBase64String(QRBytes);

                            // Write image as file to folder.
                            File.WriteAllBytes(Server.MapPath("qrimg.jpg"), QRBytes);
                            File.WriteAllBytes(Server.MapPath("logo.jpg"), image);
                            File.WriteAllBytes(Server.MapPath("sign.jpg"), bytes);
                            // convert and set absolute url in image.
                            Image1.ImageUrl = GetUrl("qrimg.jpg");
                            Image2.ImageUrl = GetUrl("sign.jpg");
                            imgFileUpload.ImageUrl = GetUrl("logo.jpg");
                        }
                        var ImgUrl = Image1.ImageUrl;
                        var ImagUrl = imgFileUpload.ImageUrl;
                        var ImgeUrl = Image2.ImageUrl;
                        string fileName = "PDF document" + DateTime.Now.ToString() + ".pdf";

                        StringWriter sw = new StringWriter();
                        HtmlTextWriter hw = new HtmlTextWriter(sw);
                        Panel1.RenderControl(hw);
                        StringReader sr = new StringReader(sw.ToString());
                        Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 10f, 10f);
                        PdfWriter PdfWriter = PdfWriter.GetInstance(pdfDoc, Response.OutputStream);
                        HtmlPipelineContext htmlContext = new HtmlPipelineContext(null);
                        htmlContext.SetTagFactory(Tags.GetHtmlTagProcessorFactory());
                        ICSSResolver cssResolver = XMLWorkerHelper.GetInstance().GetDefaultCssResolver(false);
                        cssResolver.AddCssFile(Server.MapPath("~/css/style2.css"), true);
                        IPipeline pipeline = new CssResolverPipeline(cssResolver, new HtmlPipeline(htmlContext, new PdfWriterPipeline(pdfDoc, PdfWriter)));
                        var worker = new XMLWorker(pipeline, true);
                        var xmlParse = new XMLParser(true, worker);
                        pdfDoc.Open();
                        xmlParse.Parse(sr);
                        xmlParse.Flush();
                        pdfDoc.Close();
                        Response.ContentType = "application/pdf";
                        Response.AddHeader("content-disposition", "attachment;filename=" + fileName + ";");
                        Response.Cache.SetCacheability(HttpCacheability.NoCache);
                        Response.Write(pdfDoc);
                        // Delete the temp image.
                        File.Delete(Server.MapPath("qrimg.jpg"));
                        File.Delete(Server.MapPath("sign.jpg"));
                        File.Delete(Server.MapPath("logo.jpg"));
                        Image1.ImageUrl = ImgUrl;
                        Image2.ImageUrl = ImgeUrl;
                        imgFileUpload.ImageUrl = ImagUrl;
                        Response.End();
                    }
                }
            }
            catch (SqlException ex)
            {
                string msg = "Error:";
                msg += ex.Message;
                throw new Exception(msg);
            }
        }

 public string GetUrl(string imagepath)
        {
            string[] splits = Request.Url.AbsoluteUri.Split('/');
            if (splits.Length >= 2)
            {
                string url = splits[0] + "//";
                for (int i = 2; i < splits.Length - 1; i++)
                {
                    url += splits[i];
                    url += "/";
                }
                return url + imagepath;
            }
            return imagepath;
        }

Accepted answer

QiYou-MSFT 4,321 Reputation points Microsoft Vendor

2023-03-30T09:21:08.68+00:00
Hi @Donald Symmons

WordToPDF(string sourcePath, string targetPath);

'sourcePath': The address of the Word file. Depending on your needs, this address is obtained from the database.

‘targetPath’: This is the address where your converted PDF file is stored.

Let me share my thoughts:

1.First of all, the PDF file can be downloaded directly, which is actually similar to printing.

2.Of course, we need to review this file before downloading (printing). In general, word files cannot be displayed on HTML. We often convert word files into HTML files or PDF files. Here I convert it into a pdf file for presentation.

3.I think in webform, using the backend is more convenient than using js. So I'm not using js here.

Procedure:

1.First, we enter characters into 'TextBox' to make us make a database query to get the file address.

2.We find this file and convert it to pdf.

3.'<a>' tab display and download function.

Code:

public string str; protected void Page_Load(object sender, EventArgs e) { str = "Scripts/" + TextBox1.Text + ".pdf"; Page.DataBind(); } protected void Button1_Click(object sender, EventArgs e) { string connString1 = "Data Source=localhost;Initial Catalog=TestSQL;Integrated Security=TRUE"; using (SqlConnection conn = new SqlConnection(connString1)) { conn.Open(); SqlCommand sqlcom = new SqlCommand("select FilePath from dbo.File1 where FileName = '" + TextBox1.Text + "'", conn); string path= Convert.ToString(sqlcom.ExecuteScalar()); TextBox2.Text = path; WordToPDF("C:\\Users\\Administrator\\Desktop\\Test\\"+path, "C:\\Users\\Administrator\\source\\repos\\BackgroundTest\\BackgroundTest\\Scripts\\"+ TextBox1.Text + ".pdf"); } } public static void WordToPDF(string sourcePath, string targetPath) { Application application = new Application(); Document document = null; try { application.Visible = false; document = application.Documents.Open(sourcePath); document.ExportAsFixedFormat(targetPath, WdExportFormat.wdExportFormatPDF); } catch (Exception e) { Console.WriteLine(e.Message); } }

<body> <form id="form1" runat="server"> <div> <asp:Label ID="label1" runat="server" Text="Please enter file names"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Onclick="Button1_Click"/> </div> <div> <asp:Label ID="label2" runat="server" Text="Whether the file exists"></asp:Label> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </div> <div> <a href="<%# str%>" >Review</a> </div> <div> <a href="<%# str%>" download >Download</a> </div> </form> </body>

Best regards,
Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Donald Symmons 2,881 Reputation points

2023-03-30T22:33:33.8433333+00:00

Hi @QiYou-MSFT,

I'm sorry, I may have not really explained this in details for easy understanding of what I am trying to achieve.

I understand your answer. But it has more corners to it. I just want something like a direct approach, if you don't mind.

The thing is, I am trying to create a situation where users can upload either a word or pdf document on the web page, click a button and be redirected to another page where the document will be displayed, and a QR code image will also be displayed on top of the document on the web page. So, that when printing the document (word or pdf), the QR code image will be on the document.

I succeeded in creating a situation where word or pdf file can be uploaded on the web page, and inserted into the database, and upon redirecting to the second page, the word or pdf document is displayed with the QR code on it. The issue I am facing is printing either the word or pdf in pdf format.

I am thinking of a way around this; is there a way that the displayed word or pdf inside a div tag on and the web page, can be converted into an image and then printed in pdf , all at single click of a button?

I will not going into details of how I was able to upload word or pdf document and insert into database. I will rather focus on how to word or pdf document is gotten from that database and displayed on the web page.

In my question, I included how either word or pdf document is displayed from database on to the web page using static object called "GetFile". I remember, I mentioned that there is an image control that will display on top of the document on the webpage, here it is.

<asp:Panel ID="Panel1" runat="server"> <div class="contentt" runat="server" id="DivContent" style="margin: 0 auto;"> <div id="dvContainer" runat="server" style="margin: 0 auto;"></div> <asp:Image ID="Image1" runat="server" BorderStyle="None" Width="80px" Height="80px" /> </div> </asp:Panel> <asp:Button ID="Downloadbtn" Text="Download" runat="server" OnClick="Downloadbtn_Click"/>

The image control will house the QR code

The document will be encoded in a QR code like this; on page load event I will call the function:

if (!this.IsPostBack) { BindQRToDocument(); }

private void BindQRToDocument() { if (Session["DocumentID"] != null) { int id = Convert.ToInt32(Session["DocumentID"]); string sql = "SELECT * FROM DocumentTable WHERE Id = @Id"; SqlParameter[] parameters = new[] { new SqlParameter("@Id", id) }; // Bind Image3 for Card Image DataTable dt = SelectFromDatabase(sql, parameters); byte[] QRBytes = GetQRCodeBytes(ToAbsoluteUrl("~/WordPDF.aspx?Id=" + Request.QueryString["Id"])); Image1.ImageUrl = "data:image/jpg;base64," + Convert.ToBase64String(QRBytes); } else { Response.Redirect("UploadDoc.aspx"); } } public string ToAbsoluteUrl(string relativeUrl) { if (string.IsNullOrEmpty(relativeUrl)) { return relativeUrl; } if (relativeUrl.StartsWith("/")) { relativeUrl = relativeUrl.Insert(0, "~"); } if (!relativeUrl.StartsWith("~/")) { relativeUrl = relativeUrl.Insert(0, "~/"); } var url = HttpContext.Current.Request.Url; var port = url.Port != 80 ? (":" + url.Port) : String.Empty; return String.Format("{0}://{1}{2}{3}", url.Scheme, url.Host, port, VirtualPathUtility.ToAbsolute(relativeUrl)); } public byte[] GetQRCodeBytes(string url) { //QR code generated here QRCodeEncoder encoder = new QRCodeEncoder(); Bitmap bi = encoder.Encode(url); MemoryStream tmpSteam = new MemoryStream(); bi.Save(tmpSteam, ImageFormat.Jpeg); return tmpSteam.ToArray(); } public static DataTable SelectFromDatabase(string sql, SqlParameter[] parameters) { string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString; using (SqlConnection con = new SqlConnection(connectionString)) { try { using (SqlCommand cmd = new SqlCommand(sql, con)) { if (parameters != null) { cmd.Parameters.AddRange(parameters); } using (SqlDataAdapter sda = new SqlDataAdapter(cmd)) { DataTable dt = new DataTable(); sda.Fill(dt); return dt; } } } catch (SqlException ex) { string msg = "Error:"; msg += ex.Message; throw new Exception(msg); } } }

QiYou-MSFT 4,321 Reputation points Microsoft Vendor

2023-03-31T02:46:43.51+00:00

Hi @Donald Symmons

Have you tried javascript windows.print()?

I see that the page you are showing only has a button and an image and what you want to print, you can try to hide the button and trigger the button function with 'enter'. That way, the entire page is what you want to print.

Best Regards

Qi You

Donald Symmons 2,881 Reputation points

2023-03-31T07:49:17.6033333+00:00

Hi @QiYou-MSFT , that means according to me description, it cannot be printed in pdf ?

QiYou-MSFT 4,321 Reputation points Microsoft Vendor

2023-03-31T10:11:08.8333333+00:00

Hi @Donald Symmons

Depending on the situation you describe, your second page is displayed (word/pdf) and your image. Some plugins of your code I can't use, so I can't reproduce it better.

Normally, windows.print() prints everything on this page, and can also save it as a PDF.

Later I thought about it, you should add images (word/pdf) on html pages (PDF files are usually not self-editable). Perhaps on the second page we can convert the current page to pdf through C# methods.

I don't think the difficulty of your project is here. It may be that I don't understand it, but my understanding is that you are showing content and images on the second page, so that we can print it directly using windows.print().

Best Regards

Qi You

Donald Symmons 2,881 Reputation points

2023-04-02T13:40:41.5333333+00:00

Hi @QiYou-MSFT ,

Later I thought about it, you should add images (word/pdf) on html pages (PDF files are usually not self-editable). Perhaps on the second page we can convert the current page to pdf through C# methods

From your statement, I guess I should really explain it better if you’ll understand it and help out here.

I am trying to provide options for users to either upload a word or a pdf document on to the webpage. After uploading, the file is displayed o the page. There is a button that when the user clicks will insert the document into the database and redirect to another page. Then on the second, that document that was uploaded and inserted into the database is passed from the database and is also being displayed on the second page. The second page has a button that will be used to print the document, in PDF.

I have previously shared my code on how the word or pdf document is selected from the database and displayed on the second page. As it is, the document is successfully displayed inside a div tag on the second page, but how to print the document in pdf is my issue. Could there be a plugin that could aid I that regard?

What surprises me more is that, it is quite easy to print labels, images and any other asp HTML controls in pdf format, but for my requirement (printing displayed word or pdf file), it is giving me headache.

Finally,

Perhaps on the second page we can convert the current page to pdf through C# methods.

I will be very grateful if you could deliver me from this your statement. However, converting the page to pdf, will it not cut the document into half? Because when I tried to use window.print() method, my printout was without the top part of the page. Maybe window.print() only prints what it sees because I had to scroll down my window to see the print button

This is how my printout looks like below, it cuts the document that was to be printed

QiYou-MSFT 4,321 Reputation points Microsoft Vendor

2023-04-03T09:40:27.19+00:00

Hi @Donald Symmons

Actually, I think our focus should be on the key point of saving as a PDF document.

We can add images to pdf or word files through the C# method. Finally, it is stored as a PDF.

Your method is to open a word/pdf file in the page. In fact, the print function is to print something on this HTML page, and the printed result may not be so good.

I understand what you mean. You first upload the file to the database. Then fetch the file from the database, add a QR code at the bottom of the file and display it, and finally print it as a pdf file.

I tried several methods and found that it didn't solve the problem very well. Changing the size of the border displayed in this file is too reluctant.

I think you can modify the method of that button:

When the user clicks the download button, the database saves this from the database locally (in this case it is in its original file form (word/pdf)).

Then we save the QR image to the end of this file via the C# method.

Finally, the file is converted to PDF and saved by the file conversion method.

In fact, we don't need to dwell on the topic of printing. If you want to use a printer, you can print the last saved PDF file. I think this effect is better.

I've tried JavaScript printing innerhtml before, and it didn't work very well. As for the problem of using other plugins, I did not find a good plugin to complete your function.

Best Regards

Qi You

Donald Symmons 2,881 Reputation points

2023-04-03T10:22:46.36+00:00

"I've tried JavaScript printing innerhtml before, and it didn't work very well." Okay. Can you please show me how to download/save it in pdf in C# regarding this particular issue, like you mentioned?

QiYou-MSFT 4,321 Reputation points Microsoft Vendor

2023-04-04T08:14:45.7866667+00:00

Hi @Donald Symmons

First, we can sustain your previous achievements. When we click the button on the second page, we first determine whether this file is a word file or a pdf file. If it is a word file, it will be converted to a pdf file. Then add this pdf file to the corresponding QR code where you want it. Example of adding QR code to pdf file:

Code:

public void InsertPic(string sourcePath, string targetPath,string imgpath,float x,float y) { using (Stream inputPdfStream = new FileStream(sourcePath, FileMode.Open, FileAccess.Read, FileShare.Read)) using (Stream inputImageStream = new FileStream(imgpath, FileMode.Open, FileAccess.Read, FileShare.Read)) using (Stream outputPdfStream = new FileStream(targetPath, FileMode.Create, FileAccess.Write, FileShare.None)) { var reader = new PdfReader(inputPdfStream); var stamper = new PdfStamper(reader, outputPdfStream); var pdfContentByte = stamper.GetOverContent(1); Image image = Image.GetInstance(inputImageStream); image.SetAbsolutePosition(x,y); pdfContentByte.AddImage(image); stamper.Close(); } } public static void WordToPDF(string sourcePath, string targetPath) { Application application = new Application(); Document document = null; try { application.Visible = false; document = application.Documents.Open(sourcePath); document.ExportAsFixedFormat(targetPath, WdExportFormat.wdExportFormatPDF); } catch (Exception e) { Console.WriteLine(e.Message); } } protected void Button1_Click(object sender, EventArgs e) { // if pdf file //{ // InsertPic(string sourcePath, string targetPath,string imgpath,float x,float y); //} // if word file //{ // WordToPDF(string sourcePath, string targetPath) // InsertPic(string targetPath, string newtargetPath,string imgpath,float x,float y); //} }

As for the source and location of the QR code, you need to set it yourself.

Best Regards, Qi You
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How can word file displayed in a div container be printed in a pdf format?

0 additional answers

Your answer