我看过很多帖子,描述了如何使用chart.js和创建图形canvas然后保存canvas到png,并将其导入到pdf.这很好但是如果你想绕过屏幕上的部分并直接转到pdf文档并包含图像呢?
例如,我可能有两个按钮,一个用于打开屏幕上的图表canvas.然后,此页面可以处理图表保存并导入到pdf中而不会出现问题.另一个按钮pdf直接打开.是否有可能将图表放入此文档中,无论是否以某种方式将其保存在服务器上?
我怀疑我可能会被告知转到d3,但我只是想知道它是否可能进入chart.js?
上下文:使可打印的发票在浏览器中生成.
在制作可打印的网页时,通常会使用@media print规则来更改内容查找打印页面的方式.理想情况下,因为我只打印页面的一小部分,所以我想隐藏所有内容然后显示特定元素的内容.
结构是这样的:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Run Code Online (Sandbox Code Playgroud)
理想情况下,我想做点什么
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
Run Code Online (Sandbox Code Playgroud)
但这不起作用,因为有些元素需要内联,有些需要阻塞.我已经display从MDN中使用了一些不同的值,但找不到一个可以轻松将值重置为原始值的值.display: initial好像被对待了inline.
CSS中的建议:"display:auto;"?似乎只适用于JS.
当然,有可能明确地"隐藏"我不想要打印的东西,而不是显示我想要的东西,但在我看来应该可以走另一条路.
在这个问题中如何只显示CSS的某些部分用于打印?建议body *:not(.printable *) …
在我的 React 应用程序中(使用SemanticUI),我在一个视图中呈现了多个组件,但是当用户想要打印页面时(例如通过在浏览器上按 Ctrl+P),我只希望可以打印一个部分
例如,如果这是用户看到的屏幕截图,则触发浏览器打印时,应在打印概览上显示绿色区域。
到目前为止,我在 SCSS 文件中
@media print{
.no-print, .no-print *{ display: none !important; }
}
Run Code Online (Sandbox Code Playgroud)
添加不需要的组件会使它们消失,但打印区域中有空白区域并且绿色部分没有填充页面,如果这个绿色部分是可滚动的并且应该适合几页我只看到一页(一张 A4 纸包含什么我在屏幕上看到)
有
@media print {
.print-content {
display: block;
width: 100%;
height: 100%;
page-break-after: always;
overflow: visible;
}
}
Run Code Online (Sandbox Code Playgroud)
还没有得到相同的可打印视图
import React from 'react'
import { Grid, Image } from 'semantic-ui-react'
const GridExampleCelled = () => (
<Grid celled>
{/*another Grid.Row*/}
<Grid.Row>
<Grid.Column width={3}>
<Image src='/images/wireframe/image.png' />
</Grid.Column>
<Grid.Column width={10}> /* This should be the component to …Run Code Online (Sandbox Code Playgroud) 我想在某些屏幕分辨率中隐藏所有元素,只显示想要的元素:
例如:
*{
display: none;
}
#block{
display: block !important;
}
Run Code Online (Sandbox Code Playgroud)
但这不会再覆盖显示属性.演示