我在为网站下载 vcard 时遇到问题答案

【问题标题】：I am having problems with download vcard for a website我在为网站下载 vcard 时遇到问题
【发布时间】：2016-12-02 22:11:56
【问题描述】：

我正在尝试为网站创建可下载的电子名片（该网站目前是本地的，因此我无法向您展示前端）。我所做的是在我希望 vcard 显示在我的社交媒体图标旁边的 about 部分中。问题是它没有正确对齐。我点击了下载，它打开了一个新标签，但它没有下载。我认为问题出在 href 代码上

我的代码和以前一样。（我正在使用我的 LinkedIn 图像进行测试）。我对此进行了研究，并且看到了一些应用 JS 代码，但我不喜欢使用 js 或 php。

.card {
  width: 300px;
  margin: 2em auto;
  text-align: left;
  padding: 1em;
  overflow: auto;
  background-image: url(../../assets/img/linkedin-icon.png);
  

  a {
    padding: 1em;
    text-decoration: none;
    color: #00ffbb;
    background: #000;
    font-weight: bold;
    
    &:hover {
      color: #000;
      background: #00ffbb;
    }
  }
}

<!--/ #About -->
            <section id="about" name="about"></section>
            <div id="colourblock">                       
                <div class="row">
                    
                    <div class="col-md-4">
                                    <div class="aboutprofile">
                                        <img class="center" src="../../assets/img/about-section.png" alt="About" >
                                    </div>
                    </div>
        
                    <div class="col-md-8">
                            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sitDonec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sitDonec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit.
                            </p>
                            <br>
                            <p>
				<a href="www.linkedin.com" target="_blank"><img src="../../assets/img/linkedin-icon.png" alt="About" ></a>
                                <a href="www.twitter.com" target="_blank"><img src="../../assets/img/twitter-icon.png" alt="Twitter" ></a>
				<a href="mailto:imtiazabbas02@gmail.com"><img src="../../assets/img/email-profile.png" alt="Email" ></a>
                                <div class="card">
    
    <a href=" ../../assets/Imtiaz_Abbas.vcf" id="dl" target="_blank" download="Imtiaz_Abbas.vcf">Download contact</a>
  </div>


                            </p>
                    </div>
        
                </div>
            </div>

【问题讨论】：

标签： html css

【解决方案1】：

您有 2 个问题。首先是 CSS 问题。由于您显然是初学者，我建议您像使用 twitter 和 linkedin 一样建立指向您的 VCard 的链接。不要使用 div，也不要使用背景，只需使用链接即可。

第二个问题是 vcf 文件下载。我了解您想避免复杂的解决方案。最简单的解决方案是在您的 .htaccess 文件中添加一个新的 mime 类型（如果没有，您可以在 web 的根目录中创建）。您应该将此行添加到您的 htacess 文件中：

AddType text/x-vcard .vcf

您也可以在 Stackoverflow 上阅读此主题：vCard .vcf file download browser support - godaddy

【讨论】：