如何将整个页面或html内容导出，而不仅仅是图表?

hi all my chart is exporting fine with highcharts i m getting the chart for my php project

大家好，我所有的图表都可以用highcharts导出，我正在为我的php项目获取图表

but the problem is

但问题是

that i am looking to import html content or the whole page along with the chart not just the chart

我希望导入html内容或整个页面以及图表，而不仅仅是图表

is it possible to do ??

有可能吗?

can any one help me

有人能帮我吗?

or show here is a sample fiddle http://jsfiddle.net/YBXdq/

或者这里显示的是一个样例fiddle http://jsfiddle.net/YBXdq/

i need to export the text below the chart has well

我需要导出图表下面的文字

3 个解决方案

#1

There are so many direct and indirect way to achieve this

实现这一目标有很多直接和间接的方法

• Use HTML Canvas : http://html2canvas.hertzen.com/

  使用HTML Canvas: http://html2canvas.hertzen.com/

• Using wkhtmltoimage

  使用wkhtmltoimage

Example

例子

  exec('wkhtmltoimage --quality 50 http://www.bbc.com bbc.jpg');

• Using wkhtmltopdf + ImageMagic

  使用wkhtmltopdf + ImageMagic

  -- Convert the web page to pdf using wkhtmltopdf

  ——使用wkhtmltopdf将网页转换为pdf

  -- Convert pdf to jpg using ImageMagic

  -使用ImageMagic将pdf转换为jpg格式

Example

例子

exec("convert a.pdf a.jpg");

• Use PHP imagegrabwindow and imagegrabscreen
• 使用PHP imagegrabwindow和imagegrabscreen

Example

例子

$browser = new COM("InternetExplorer.Application");
$handle = $browser->HWND;
$browser->Visible = true;
$browser->Navigate("http://localhost");

/* Still working? */
while ($browser->Busy) {
    com_message_pump(4000);
}
$im = imagegrabwindow($handle, 0);
$browser->Quit();

header("Content-Type: image/png");
imagepng($im);
imagedestroy($im);

Advance Examples

之前的例子

-- Also See Get Website Screenshots Using PHP

——也可以查看使用PHP的Get网站截图

For Possible Issues : Getting imagegrabscreen to work

对于可能的问题:让imagegrabscreen工作

• use Webshort and call it from php using exec if you have python installed
• 如果您安装了python，请使用Webshort并使用exec从php调用它。

Example

例子

exec("python webshot.py https://example.com/webshot/php example.png");

• Download and use Website Thumbnail Generator
• 下载并使用网站缩略图生成器

Example

例子

webthumb.php?url=http://www.google.com&x=150&y=150

• Use boxcutter
• 使用boxcutter

Example

例子

exec('boxcutter -f image.png');

• Capture Screenshots in PHP with GrabzIt
• 用GrabzIt捕捉PHP中的屏幕截图

Example

例子

$grabzIt = new GrabzItClient("APPLICATION KEY", "APPLICATION SECRET");
$id = $grabzIt->TakePicture("http://www.google.com", "http://www.example.com/GrabzItHandler.php");

• using wimg.ca
• 使用wimg.ca

Example with this current page

以当前页面为例

  http://wimg.ca/https://*.com/questions/10328457/how-to-export-the-whole-page-or-html-content-with-highcharts-not-just-the-chart/10330701#10330701

• TimThumb – PHP Image Resizer
• PHP图像大小调整器

Example

例子

 timthumb.php?src=http://www.google.com/&webshot=1

I think have given more than enough example

我认为已经给出了足够的例子

#2

You can try to print the page , or make a pdf using php file functions to get the desired html content .

您可以尝试打印页面，或者使用php文件函数生成pdf以获得所需的html内容。

or you can try the method told by baba to get the image :)

或者你也可以试试爸爸告诉你的方法来获取图像:)

#3

i found a simple workaround for exporting charts (printing)

我找到了一个导出图表(打印)的简单方法

and

和

i didn't use any plugin just little plain old css and some javascript

我没有使用任何插件，只是一些简单的旧css和一些javascript

which in my case is

我的情况是

i wanted to print the chart with some specific html content of the page

我想用页面的特定html内容来打印图表

or in my case i wanted to remove header , footer and left menu

或者在我的例子中，我想删除页眉，页脚和左菜单。

i dint wanted to show buttons or unecessary content

我不想显示按钮或不必要的内容

and just show the page content , description table and chart

只显示页面内容、描述表和图表

so here is i how i achieved it.

这是我如何实现的。

> CSS :-

---

<style type="text/css">
@media print{
@page
        {
            size: auto;   /* auto is the initial value */
            margin: 0mm;  /* this affects the margin in the printer settings */
        }
  body{ background-color:#FFFFFF; background-image:none; color:#000000 }
  .navimainbg{ display:none;}
  .printhide{ display:none;}
  .usercontent-footer{ display:none;}
  .linkBTN{ display:none;}
  .userheader{ display:none;}
  .user-profile-left{ display:none;}
  #userbgcontent{ width:100%;}
}
</style>

We are focussing on the print css here which we implied when the page is printed

我们关注的是打印的css，当页面被打印出来的时候。

acess the divs or portions of the page which you dont want ot be printed via their class or id depending upon your usage

如果您不希望根据您的使用情况通过它们的类或id打印页面的某些部分或部分

for example

例如

i didnt wanted to display the button

我不想显示按钮

 .linkBTN{ display:none;}

which can be simply called via javascript.

可以通过javascript调用。

Javascript :->

---

<script type="text/javascript">


function printpage()
{

window.print()
}

<script type="text/javascript">

we can invoke the print function to print the page minus elements we dont want to print with the page via click of a button by calling function in my case "printpage" as you can see this button will also not display while printing as printhide class display is set to none while priting

我们可以调用打印功能,打印页面元素-我们不想打印的页面通过点击一个按钮,调用函数就我而言“printpage”可以看到这个按钮也不会显示在打印printhide类印刷时显示设置为none

<input title="Print a Printer Friendly Page" class ="printhide" type="button" value="Print this page" onclick="printpage()">

isnt is it a simple way to print chart other than highcharts printing if you want to print more

如果你想打印更多的图表，这难道不是一种打印图表的简单方法吗

only con is that sometime the image will slide down when you want to show it along with some conetent due to lack of size to render an image . it will shift to next page . other than its tested working .

唯一的缺点是，当你想要显示它的时候，由于缺乏渲染图像的尺寸，图像有时会向下滑动。它将转到下一页。除了测试工作。