精华内容
下载资源
问答
  • PDF直接下载到本地vue
    2022-04-11 17:06:05
    downloadPdf(){
      var ajax=new XMLHttpRequest();
      ajax.open( "GET", "url地址", true);
      ajax.setRequestHeader("Cache-Control","no-cache")
      ajax.setRequestHeader('Access-Control-Allow-Origin', '*');
      ajax.responseType = 'blob';
      ajax.onload = e =>{
        let res = e.target.response;
        let blob = new Blob([res],{type: "application/pdf;charset=UTF-8"}) // 这里的res为后端返回的流数据
        let aLink = document.createElement("a")
        aLink.download = “xxxxx"// 下载文件的名字
        aLink.href = URL.createObjectURL(blob)
        aLink.click()
      }
      ajax.send()
    }
    
    更多相关内容
  • vue 下载pdf文件

    千次阅读 2019-11-19 16:57:10
    首先安装依赖 npm install html2canvas jspdf --save 封装方法: // pdfMethod.js ...点这里下载 ...这里用class类名包裹的所有html样式都会按照vue展现的样式被canvas绘出来并以pdf文件输出
    1. 首先安装依赖npm install html2canvas jspdf --save
    2. 封装方法:
    // pdfMethod.js
    import html2canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    const generateResume = (el, name) => {
      html2canvas(el).then(canvas => {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        //一页pdf显示html页面生成的canvas高度;
        let pageHeight = (contentWidth / 592.28) * 841.89
        //未生成pdf的html页面高度
        let leftHeight = contentHeight
        //页面偏移
        let position = 0
        //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
        let imgWidth = 595.28
        let imgHeight = (592.28 / contentWidth) * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let pdf = new JsPDF('', 'pt', 'a4')
        //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围,无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            //避免添加空白页
            if (leftHeight > 0) {
              //添加新页
              pdf.addPage()
            }
          }
        }
        pdf.save(`${name}.pdf`)
      })
    }
    export default generateResume
    
    1. 开始使用:
    <template>
      <div class="priview_resume_container">
        <div style="font-size: 30px" @click="getResume">点这里下载</div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'priviewResume',
        methods: {
          getResume() {
            generateResume(
            document.getElementsByClassName('priview_resume_container')[0],
            '测试'
            )
          }
        },
        components: {}
      }
    </script>
    

    这里用class类名包裹的所有html样式都会按照vue展现的样式被canvas绘出来并以pdf文件输出

    展开全文
  • 主要为大家详细介绍了vue实现在线预览pdf文件下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue项目,axios去请求...//下载用户手册PDF时请求的接口 export const getGuide = (param) => { return request({ url:"请求url", method:"get", params:param, //一定要加responseType responseType: "blob

    vue项目,axios去请求接口

    request文件中代码:

    import request from "封装好的axios请求文件"
    
    //下载用户手册PDF时请求的接口
    export const getGuide = (param) => {
        return request({
          url:"请求url",
          method:"get",
          params:param,
          //一定要加responseType
          responseType: "blob"
        })
      }
    

    页面中点击下载按钮时,去请求文件流,然后执行下载操作
    代码如下:

    downloadGuide(){
            getGuide().then(res => {
              let blob = new Blob([res], {type: 'application/pdf'});
              let downloadElement = document.createElement("a");
              let href = window.URL.createObjectURL(blob); //创建下载的链接
              downloadElement.href = href;
              downloadElement.download = `用户手册-${this.name}`    //下载后的文件名,根据需求定义
              document.body.appendChild(downloadElement);
              downloadElement.click(); //点击下载
              document.body.removeChild(downloadElement); //下载完成移除元素
              window.URL.revokeObjectURL(href); //释放掉blob对象
            })
        }
    
    展开全文
  • vue下载本地pdf文件

    千次阅读 2020-02-19 14:03:08
    Vue下载本地pdf文件 html: <button @click="downloadPDf">downloadPDf</button> js: downloadPDf() { axios.post('http://localhost:8080/static/test....

    Vue下载本地pdf文件

    html:

    <button @click="downloadPDf">downloadPDf</button>
     

    js:

    
     
    1. downloadPDf() {
    2. axios.post( 'http://localhost:8080/static/test.pdf', {
    3. responseType: 'blob', //重要
    4. }).then( response => {
    5. const url = window.URL.createObjectURL( new Blob([response.data]));
    6. const link = document.createElement( 'a');
    7. let fname = 'report.pdf';
    8. link.href = url;
    9. link.setAttribute( 'download', fname);
    10. document.body.appendChild(link);
    11. link.click();
    12. })
    13. }
    14. }

    记住本地文件一定要放在static文件夹下面。

    展开全文
  • vue实现下载pdf文件

    千次阅读 热门讨论 2021-06-25 10:49:30
    2.这里是pdf文件已经由后台生成并且传了阿里云,所以这边直接传入线上地址即可,其他小伙伴没有线上地址的 可以先实现阿里云上传或者其他方法获取线上地址在调用。 this.fileLinkToStreamDownload(url) //直接...
  • 这个方法是通过调用服务,服务端给前端返回pdf文件流(不是字节流)。在用blob下载。貌似所有方法都是文件流下载的吧。 // 后端服务地址方法 api(id).then(res => { let blob = new Blob([res]); let ...
  • vue预览本地pdf文件.

    千次阅读 2022-02-25 16:57:30
    预览pdf
  • Vue pdf文件不预览直接下载

    千次阅读 2021-02-04 15:26:25
    本地无法下载的话,可以试试放线上。 文件名要加 .pdf 后缀 方法一: downloadFile_1(fileName, filePath) { if (!filePath) { return } let url = window.URL.createObjectURL(new Blob([filePath])) let ...
  • vue跨域请求

    2019-03-27 14:49:39
    vue的3种跨域请求方式
  • 主要介绍了vue element-ui读取pdf文件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • <p>vue <p>ipad下,safari下载base64PDF文件</p>
  • 下载本地文档资源 亲测有用 并且兼容ie浏览器 npm install downloadjs // 引入download.js import download from "downloadjs"; download(url,'用户手册.pdf');
  • vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `...
  • 方法:vue下载pdf ,不预览直接下载

    千次阅读 2020-12-08 15:19:52
    vue下载pdf ,不预览直接下载 // 下载文件 downloadfun(file_name,file_path){ console.log(file_name) var ajax=new XMLHttpRequest(); ajax.open( "GET", file_path, true); ajax.setRequestHeader("Cache-...
  • 设置pdf地址,vue实现展示pdf文件自动加载下一页,使用方便
  • vue 本地pdf文件展示

    2021-08-27 14:09:44
    src="../../../static/plugins/pdf/2021海宁智能化改造案例.pdf" frameborder="0" /> --> <!-- 第二种 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 --> <iframe .
  • 3.demo上的pdf文件只有一页,测试多页展示,自己改用多页pdf文件即可 <div class=pdf_wrap> <div class=pdf_list> <!-- src:pdf地址,page: 当前显示页 --> <pdf v-for=i in numPages :k
  • 但是pdf文件这样会直接打开预览 使用download.js可以免打开直接弹出下载框 GitHub地址 vue使用方法: 首先命令行 npm install downloadjs -S 在需要使用的页面xxx.vue文件的script标签内 import download f...
  • vue-在线预览pdf文件下载(pdf.js)

    千次阅读 2019-09-25 17:47:06
    最近做项目遇到在线预览和下载pdf文件 试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径...
  • 目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的...
  • 方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除,如图 方式三:将插件直接放在static文件夹下,如图 二、前端页面代码 方式一和方式二:特点精简 <canvas v-for="page in ...
  • vue 通过url下载pdf文件

    千次阅读 2021-11-04 09:23:55
    试过了各种a标签以及blob对象都下载不成功 最后找了个插件download.js GitHub - rndme/download: file downloading using client-side javascript 1.npm install downloadjs 2.import download from 'downloadjs...
  • vue项目下载PDF文件

    2021-08-06 10:42:24
    export function downPDF(query) { return request({ url: baseUrl + '/xxx/xxxPDF', //后端接口的地址 method: 'get', params: query, responseType: "blob", //这行必写 ...下载PDF文件的方法 //.
  • 使用vue-pdf预览pdf文件

    2021-08-13 14:51:28
    本地预览的话,如果是使用cli/3,需要把pdf文件 public 文件下中,新建一个 static 文件夹,放入其中 使用 安装 vue-pdf 只能使用绝对路径,而且 / 就表示 public 文件夹,所以需要忽略掉,如下 <pdf src...
  • vue 下载pdf

    2022-03-21 14:54:16
    标题vue 下载pdf 在这里插入代码片 1. a.将html页面转换成图片 npm install --save html2canvas b.将图片生成pdf npm install jspdf --save 2.在utils文件夹中创建一个名字叫个htmlToPdf.js的文件,内容如下: ...
  • 一 ,npm install --save vue-pdf 下载插件包 二 , 新建一个.vue页面 , 把下面代码全部复制过去 , 打开vue页面就是pdf了 <template> <div class="pdf"> <pdf v-for="currentPage in ...
  • vue预览本地pdf文件方法之vue-pdf组件

    千次阅读 2020-11-24 17:41:45
    npm install --save vue-pdf 2、页面引入 3、具体实现 <div class="pdf" v-show="fileType === 'pdf'"> <p class="arrow"> <span @click="changePdfPage(0)" class="turn
  • 网路地址 和静态资源的pdf文件是可以用iframe渲染的 (公司的地址打了马赛克 希望能理解) 但是换成本地的文件就不可以 有渲染出来的元素 但是页面不显示
  • 1、下载blob文件 //在请求中必须标明:responseType: 'blob'。 比如this.$axois({ method: 'get', url: '', responseType: 'blob' }).then(response => { let data = response.data; //如果下载下来的是i二...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,835
精华内容 1,134
关键字:

vue下载pdf文件到本地

友情链接: FPGA-and-SOPC.rar