Question

我正在使用use the setUp class method or instance method作为我的网络应用程序。使用离子视图显示每个页面。我想打印图表（或将其另存为pdf）。

这是我的代码，

                string savepath;  
                HttpPostedFile postedFile = context.Request.Files["Filedata"];
                savepath = context.Server.MapPath("files");
                string filename = postedFile.FileName;
                todelete = savepath + @"\" + filename;
                string forex = savepath + @"\" + filename;
                postedFile.SaveAs(savepath + @"\" + filename);
                DataTable tblcsv = new DataTable();
                tblcsv.Columns.Add("latitude");
                tblcsv.Columns.Add("longitude");
                tblcsv.Columns.Add("mps");
                tblcsv.Columns.Add("activity_type");
                tblcsv.Columns.Add("date_occured");
                tblcsv.Columns.Add("details");
                string ReadCSV = File.ReadAllText(forex);

                foreach (string csvRow in ReadCSV.Split('\n'))
                {
                    if (!string.IsNullOrEmpty(csvRow))
                    {
                        //Adding each row into datatable  
                        tblcsv.Rows.Add();
                        int count = 0;
                        foreach (string FileRec in csvRow.Split('-'))
                        {
                            tblcsv.Rows[tblcsv.Rows.Count - 1][count] = FileRec;
                            count++;
                        }
                    }


                }

我使用Chrome浏览器。当我点击打印按钮时，它会返回

＆＃34;打印预览失败＆＃34;。

如何打印此页？

Answer 1

我可以通过添加以下CSS来打印我的Ionic应用程序：

@media print {
  .scroll-content {
    position: relative;
  }

  .pane {
    position: initial;
  }
}

不要问我为什么这样有效;我只知道它对我有用，我希望它也可以帮助别人！

Answer 2

我知道我可能会迟到一点，但我希望这将有助于其他人。

此问题的解决方案是覆盖默认的离子组件样式。

在默认设置中，某些属性可能会破坏我们的打印预览，如：位置，高度，溢出。

必须记住打印时间：

height: 100%，
position: fixed/absolute/relative（在某些情况下），
overflow: hidden，

是棺材中的最后一颗钉子。

没有容器应该设置它们。

对于位置，您可以使用静态，height使用fixed values或只留下auto选项。永远记得设置overflow: visible。否则我们想要打印的东西可能会被隐藏。

您还可以阅读我的简短文章，以便更深入地了解打印基于离子的应用程序：http://blog.primemodule.com/print-style-sheets-in-ionic-framework/

如何在离子视图中打印网页

2 个答案: