Angular ngx-extended-pdf-viewer 禁用媒体打印属性

Question

我想在带有 ngx-extended-pdf-viewer 组件的对话框中显示 pdf (https://www.npmjs.com/package/ngx-extended-pdf-viewer)。 PDF 正确显示。现在我的问题是 pdf 查看器本身使用了一些媒体查询。如果宽度小于 700px，一些按钮将消失并显示在扩展按钮中。

pdf查看器的宽度是固定的，所以当媒体变小时它会滚动。所以我不再需要媒体查看器的媒体设置。如何在我的 Angular 5 应用程序中禁用它们？

我尝试使用以下代码将封装设置为 viewEncapsulation.None：

@media (max-width : 700px) {
    #outerContainer .hiddenMediumView {
        display: inherit;
    }
}

这是在库中用于获得更小宽度的代码。

@media (max-width: 700px)
#outerContainer .hiddenMediumView {
    display: none;
}

Answer 1

2019 年 7 月 17 日更新： 我刚刚发布了 ngx-extended-pdf-viewer 1.0.0-rc.1。这个版本应该可以解决你的问题。现在您可以选择两种策略来实现响应式设计：纯 CSS 方法（设置 [ignoreResponsiveCSS]="false"）和由 JavaScript 提供支持的方法（设置 [ignoreResponsiveCSS]="true"）。另外，这套公寓有一个合理的默认设置。 CSS 方法是首选，如果 PDF 查看器未跨越 window 的整个宽度，则默认情况下仅选择 JavaScript 方法。例如，如果有侧边菜单，则原生 CSS 规则无用，因此使用 JavaScript 引擎。

原回答： 哎呀。我是 ngx-extended-pdf-viewer 的作者，我什至没有想到媒体查询会妨碍您。雪上加霜的是，我已经开始将媒体查询迁移到 JavaScript，所以即使是臭名昭著的 !important hack 也帮不了你。

请在 https://github.com/stephanrauh/ngx-extended-pdf-viewer/issues 开票。我的报价：我可以完成将媒体查询迁移到 JavaScript。反过来，这让我可以添加一个选项来完全关闭它们。这对你有帮助吗？还有其他想法吗？

Angular ngx-extended-pdf-viewer 禁用媒体打印属性

Angular ngx-extended-pdf-viewer disable media print properties

angular

sass

ngx-extended-pdf-viewer