小编Flo*_*sdG的帖子

对于我正在进行的项目,我需要能够生成用户当前所在页面的PDF,我将使用该页面jspdf.由于我HTML需要生成PDF,我需要这个addHTML()功能.关于这一点有很多话题,说

你需要使用html2canvas或rasterizehtml.

我选择使用html2canvas.这就是我的代码目前的样子:

import { Injectable, ElementRef, ViewChild } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as d3 from 'd3';
import * as html2canvas from 'html2canvas';

@Injectable ()
export class pdfGeneratorService {

  @ViewChild('to-pdf') element: ElementRef;

  GeneratePDF () {
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
        var pdf = new jsPDF('p','pt','a4');

        pdf.addHTML(canvas, function() {
          pdf.save('web.pdf');
        });
      }
    });
  }
}

调用此函数时,出现控制台错误:

EXCEPTION:./AppComponent类中的错误AppComponent - 内联模板:3:4导致:您需要https://github.com/niklasvh/html2canvas或https://github.com/cburgmer/rasterizeHTML.js …

我需要两种颜色之间的过渡OnClick.现在,这是我的代码:

打字稿

animations: [
    trigger('menubarState', [
        state('false', style({backgroundColor:'#43a047'})),
        state('true', style({backgroundColor:'#333'})),
        transition('false => true', animate('1s')),
        transition('true => false', animate('1s'))
    ])
]

...

export class MenubarComponent {
  menuActive: boolean = false;
  onMenuClick () {
    if (this.menuActive == false) {
      this.menuActive = true;
    } else {
      this.menuActive = false;
    }
  }
}

HTML

<li [@menubarState]="menuActive" (click)="onMenuClick()">
      <a><span class="material-icons icon">apps</span></a>
</li>

这确实改变了background-color它应该.然而,这种变化是即时的,而不是过渡.

我使用的是Chrome,最新版本.

这不是上述问题的重复

我material-icons在我的网站上使用.为了添加图标,你必须做这样的事情:

<p class="material-icons">info_outline</p>

如果我现在复制该图标,它将复制文本"info_outline".我知道你可以user-select: none;在你里面使用一个不可选择的元素css,但是有一个问题.

以我的片段为例.如果我创建一个p元素,span内部有一个元素,user-select: none;你将无法选择(并因此复制)跨度.但是,如果您复制整个p元素,您仍将获得该元素的内容span.我怎样才能防止这种情况发生？

span {
  user-select: none;
}

input {
  width: 100%;
}

<p>Copy this text with a <span>unselectable</span> piece of text... Or is it?</p>
<input type="text" placeholder="Past text here">

编辑: 由于很多人都说答案是问题的重复问题,所以user-select: none;再看看我的问题.

我知道用户选择如何工作!我知道你可以让一个元素无法选择.但是,如果你选择它周围的元素并复制它的内容,它将复制它的所有内容,甚至是复制它的元素.user-select: none;

我需要使用TCPDF和PHP制作PDF生成器.我可以在PDF上写下所有内容,但这看起来很糟糕.因此,我需要将HTML中的每个产品都放在不同的页面上.

使用较新的页面,它非常简单.只需使用dom文档查找<div>产品周围,将其放入数组并将其写入PDF.

不幸的是,不是每个页面都是相同的,所以不是每个页面都有<div>.这个页面例如.

'<h3>sample#1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<img>
<table>
</table>

<h3>sample#2</h3>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
<img>
<table>
</table>

<h3>sample#3</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<img>
<table>
</table>

<h3>sample#4</h3>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<img>
<table>
</table>'

所以我想要得到的是这样的:

array (size=4)
0 => string "
<h3>sample#1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<img>
<table>
</table>"
1=> …

由于我现在已经制作了2年的网站,我觉得这个问题很尴尬,但由于某种原因,这段代码不起作用:

<input type="number" name="ov_number" pattern="[0-9]{8}" required>

我试图这样input做,它只允许8个数字.没有其他人物,仅此而已,仅此而已.我遇到的问题是,网页会告诉我输入是否为空,我不能设置任何其他字符然后编号,但它允许input有多于或少于8个字符.

我觉得我错过了一些非常愚蠢的东西,我似乎无法弄明白.

我正在使用MPDF从HTML代码生成PDF文件。不幸的是，首页的布局与其余页面不同。

有什么方法可以使首页与其他页面有所不同？还有布局，有什么方法可以将页眉和页脚设置在其他位置，或者从第二页到最后一页删除整个页眉？

我有2地图layer的含features（标记）。我已经这样做了，如果地图放大到足够远，1layer将变得不可见，另一个将变得可见（反之亦然）。像这样：

this.map.getView().on('propertychange', (e: any) => {
  if (e.key == "resolution") {
    if (this.map.getView().getZoom() >= 17) {
      exampleLayer1.setVisible (false);
      exampleLayer2.setVisible (true);
    } else if(this.map.getView().getZoom() < 17) {
      exampleLayer2.setVisible (false);
      exampleLayer1.setVisible (true);
    }
  }
})

我现在需要补充的是，如果你点击一个feature在exampleLayer1层，地图会在和中心开始放大对要素的位置，这将使exampleLayer1消失，exampleLayer2可见。为此，我使用此功能：

var select_interaction = new ol.interaction.Select();

select_interaction.getFeatures().on("add", (e: any) => {
  var feature = e.element;
  this.map.getView().setCenter(feature.getGeometry().getCoordinates())
  this.map.getView().setZoom(17);
});

this.map.addInteraction(select_interaction);

几乎一切正常，这意味着一个layer会消失，另一个会出现。但是，feature点击不会消失，即使它的父级 (the layer) 确实消失了。如果我然后点击feature它就会消失。

我怎样才能让它layer（包括 …