将 Mat-Raised-Button HTML 链接制作为 PDF (Angular 6 + Material)答案

【问题标题】：Make Mat-Raised-Button HTML link to PDF (Angular 6 + Material)将 Mat-Raised-Button HTML 链接制作为 PDF (Angular 6 + Material)
【发布时间】：2018-11-15 07:39:54
【问题描述】：

下午好，

我有两个密切相关的问题： 1.当我点击以下代码时：

HTML

<a mat-raised-button 
class="sample-button" 
color="primary" 
href="{{card.ButtonURL}}"
>{{card.Label}}</a>

对象引用（打字稿）：

  {
    Name:'Test PDF', cols: 1, rows: 1,
    Label: 'Test PDF',
    ButtonURL: '../pdfs/test.pdf',
    imageURL: 'https://png.icons8.com/material/480/00457C/upload-link-document.png',
    imageDesc: 'Test Description',
    },

为什么<a mat-raised-button href="../pdfs/test.pdf"></a>更改URL（见图4）而不是在新窗口中打开test.pdf？

如果我有一个调查，并且想链接到一个文件以从我的 Web 服务器下载，是否需要在 Angular Web 应用程序中进行配置，或者我可以只指向服务器上的文件路径吗？李>

谢谢你的帮助，我是新手。

图片：

Folder Structure Root

Folder Structure /src

Screenshot of Application

Screenshot of Application after Test Link is clicked

【问题讨论】：

标签： html angular typescript angular-material2

【解决方案1】：

首先您必须将目标添加到<a> 才能在新标签中打开它示例：

<a target="_blank" href="{{card.ButtonURL}}">{{card.Label}}</a>

其次，您必须确保 url 有效，我的意思是这个位置确实有 pdf。我建议您也将您的 PDF 文件放在 assets 文件夹中 - 默认为 Angular 来存储本地文件

【讨论】：

我相信我的问题是我试图在 href="" 之后放置 target="" 我使用的是标签。我也切换到使用资产文件夹，一切似乎都正常工作。感谢您的帮助
很高兴为您提供帮助
我还发现，只有当 pdf 位于 assets 文件夹中时，这才有效。我尝试了多种方法在不同的文件夹中指向它，但它从来没有用过，但是一旦我在资产文件夹中指向它，它就完美地工作了。
@MrShantastic 好吧，当文件与 /assets 位于不同的位置时，这将无法工作。这是因为资产文件夹被配置为提供静态文件，并且脚本可以访问它。如果您将文件放在不同的位置，则服务的应用程序在本地没有文件。