相关疑难解决方法(0)

图表从chart.js到pdf

我看过很多帖子,描述了如何使用chart.js和创建图形canvas然后保存canvas到png,并将其导入到pdf.这很好但是如果你想绕过屏幕上的部分并直接转到pdf文档并包含图像呢?

例如,我可能有两个按钮,一个用于打开屏幕上的图表canvas.然后,此页面可以处理图表保存并导入到pdf中而不会出现问题.另一个按钮pdf直接打开.是否有可能将图表放入此文档中,无论是否以某种方式将其保存在服务器上?

我怀疑我可能会被告知转到d3,但我只是想知道它是否可能进入chart.js

在此输入图像描述

pdf canvas chart.js

9
推荐指数
1
解决办法
2万
查看次数

隐藏所有,用css显示一个类

上下文:使可打印的发票在浏览器中生成.

在制作可打印的网页时,通常会使用@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)

但这不起作用,因为有些元素需要内联,有些需要阻塞.我已经displayMDN中使用了一些不同的值,但找不到一个可以轻松将值重置为原始值的值.display: initial好像被对待了inline.

CSS中的建议:"display:auto;"?似乎只适用于JS.

当然,有可能明确地"隐藏"我不想要打印的东西,而不是显示我想要的东西,但在我看来应该可以走另一条路.

在这个问题中如何只显示CSS的某些部分用于打印?建议body *:not(.printable *) …

html css printing css3

5
推荐指数
1
解决办法
2993
查看次数

React,打印机友好的可打印区域进行打印 (Ctrl+P)

在我的 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)

html css printing reactjs semantic-ui-react

3
推荐指数
1
解决办法
5032
查看次数

为什么我不能覆盖通过星号应用的显示属性?

我想在某些屏幕分辨率中隐藏所有元素,只显示想要的元素:

例如:

*{
    display: none;
}
#block{
    display: block !important;
}
Run Code Online (Sandbox Code Playgroud)

但这不会再覆盖显示属性.演示

css css-selectors

1
推荐指数
1
解决办法
838
查看次数