图片、Word、Excel、PDF文件类型的上传、下载、在线预览。

最新推荐文章于 2022-06-10 13:26:45 发布

weixin_33762130

最新推荐文章于 2022-06-10 13:26:45 发布

阅读量447

点赞数

原文链接：https://my.oschina.net/qingqingdego/blog/2998811

版权

2019独角兽企业重金招聘Python工程师标准>>>

网络收集的资料

Excel导入导出 https://www.jianshu.com/p/74d405940305

如何使用RileReader https://www.jianshu.com/p/5fd16155901a

比较全的预览总结 https://juejin.im/post/5a7badf26fb9a063353198a1

C#excel转图片思路 https://bbs.csdn.net/topics/391821536

C#excel转图片 https://www.cnblogs.com/zhuweisky/p/4774803.html

PDF预览 https://juejin.im/post/5b436539e51d45195759f1ab

PS：这么多个链接写谁呢，干脆谁也不写，放到最上面好了。

根据资料，实现测试代码如下，

上传文件

upimage:function(fileId){
      if (typeof FileReader !== "undefined") {
       
            var max_size = 2000;// 50k
            var tmpFile = document.getElementById(fileId);
        
            if (tmpFile.value === undefined || tmpFile.value == null || tmpFile.value == '') {
                //alert("请上传图片");
                //return false;
            } else {
                if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG|ico)$/.test(tmpFile.value)) {
                    //alert("图片类型必须是[.gif,jpeg,jpg,png]中的一种");
                    //alert("Image type must be one of [.gif, jpeg, jpg, png]");
                    MessageBox('图片类型必须是[.gif,jpeg,jpg,png]中的一种"','提示');
                    tmpFile.value = "";
                    return;
                } else {
                    var fileData = tmpFile.files[0];
                    var size = fileData.size;
                    if (size > max_size * 1024) {
                        //alert("图片大小不能超过2M");
                        //alert("Image size cannot exceed 2M");
                        MessageBox('图片大小不能超过2M','提示');
                        tmpFile.value = "";
                    } else {
                        // console.log(tmpFile);   //连标签原样输出了
                        // console.log(tmpFile.value);   //图片路径                        
                    
                        var reader = new FileReader();  // FileReader
                        reader.readAsDataURL(fileData);
                        reader.onload = function () {
                            // 获取到base64图片内容                            
                            var fileStream = this.result;                                                   
                            /**
                             * overwrite do something
                             * */
                            document.getElementById("myimg").src = fileStream;
                            document.getElementById("myimg").style = 'width: auto;height: auto;max-width: 100%;max-height: 100%;display:block;';
                        
                            //right.style = 'width: auto;height: auto;max-width: 100%;max-height: 100%;display:block;';
                        }
                        console.log(size / 1024 + 'kB');
                    }
                }
            }
        } else {
            MessageBox('提示', '当前浏览器不支持上传组件');
        }
        this.clearInputValue(fileId);
    },
    clearInputValue:function (t_id){
      document.getElementById(t_id).value = "";
    },

下载文件

<a id="downlink"></a>
<input type="text" id="excel_name" value="" style="display:none;" >

downdata:function(){
        var excel_name=document.getElementById("excel_name").value;
        if(excel_name!=""){
            this.outFile = document.getElementById("downlink");
            var href=window.location.origin+"/static/tab/"+excel_name;
            console.log(href);
            this.outFile.download = excel_name; // 下载名称
            this.outFile.href = href; // 绑定a标签
            this.outFile.click(); // 模拟点击实现下载                    
        }
    }

预览文件

思路：将word，excel 转换成图片，然后使用Img显示图片。

#region 转图片
        /// <summary>
        /// 在源码中，我们提供了Word2ImageConverter 、Pdf2ImageConverter 、Ppt2ImageConverter来分别用于word文档、pdf文档、ppt幻灯片到图片的转换。
        /// 有一点要注意的是，Aspose没有直接提供ppt转图片的API，但是，它提供了将ppt转为pdf的功能，所以，源码中实现ppt转图片是经过了pdf中转的，即：先将ppt文档转换为pdf文档
        /// 
        /// <summary>
        /// 将Word文档转换为图片的方法（该方法基于第三方DLL），你可以像这样调用该方法：
        /// ConvertPDF2Image("F:\\PdfFile.doc", "F:\\", "ImageFile", 1, 20, ImageFormat.Png, 256);
        /// </summary>
        /// <param name="pdfInputPath">Word文件路径</param>
        /// <param name="imageOutputPath">图片输出路径，如果为空，默认值为Word所在路径</param>
        /// <param name="imageName">图片的名字，不需要带扩展名，如果为空，默认值为Word的名称</param>
        /// <param name="startPageNum">从PDF文档的第几页开始转换，如果为0，默认值为1</param>
        /// <param name="endPageNum">从PDF文档的第几页开始停止转换，如果为0，默认值为Word总页数</param>
        /// <param name="imageFormat">设置所需图片格式，如果为null，默认格式为PNG</param>
        /// <param name="resolution">设置图片的像素，数字越大越清晰，如果为0，默认值为128，建议最大值不要超过1024</param>
        public static void ConvertWordToImage(string wordInputPath, string imageOutputPath,string imageName, int startPageNum, int endPageNum, ImageFormat imageFormat, float resolution)
        {
            try
            {
                // open word file
                Aspose.Words.Document doc = new Aspose.Words.Document(wordInputPath);

                // validate parameter
                if (doc == null) { throw new Exception("Word文件无效或者Word文件被加密！"); }
                if (imageOutputPath.Trim().Length == 0) { imageOutputPath = Path.GetDirectoryName(wordInputPath); }
                if (!Directory.Exists(imageOutputPath)) { Directory.CreateDirectory(imageOutputPath); }
                if (imageName.Trim().Length == 0) { imageName = Path.GetFileNameWithoutExtension(wordInputPath); }
                if (startPageNum <= 0) { startPageNum = 1; }
                if (endPageNum > doc.PageCount || endPageNum <= 0) { endPageNum = doc.PageCount; }
                if (startPageNum > endPageNum) { int tempPageNum = startPageNum; startPageNum = endPageNum; endPageNum = startPageNum; }
                if (imageFormat == null) { imageFormat = ImageFormat.Png; }
                if (resolution <= 0) { resolution = 128; }

                ImageSaveOptions imageSaveOptions = new ImageSaveOptions(GetSaveFormat(imageFormat));
                imageSaveOptions.Resolution = resolution;

                // start to convert each page
                for (int i = startPageNum; i <= endPageNum; i++)
                {
                    imageSaveOptions.PageIndex = i - 1;
                    doc.Save(Path.Combine(imageOutputPath, imageName) + "_" + i.ToString() + "." + imageFormat.ToString(), imageSaveOptions);
                }
            }
            catch (Exception ex)
            {
                
            }
        }

        public static void ConvertExcelToImage(string wordInputPath, string imageOutputPath, string imageName, int startPageNum, int endPageNum, ImageFormat imageFormat, float resolution)
        {
            Aspose.Cells.Workbook book = new Aspose.Cells.Workbook(wordInputPath);
            
            if (imageOutputPath.Trim().Length == 0) { imageOutputPath = Path.GetDirectoryName(wordInputPath); }
            if (!Directory.Exists(imageOutputPath)) { Directory.CreateDirectory(imageOutputPath); }
            if (imageName.Trim().Length == 0) { imageName = Path.GetFileNameWithoutExtension(wordInputPath); }
            if (startPageNum <= 0) { startPageNum = 1; }
            if (endPageNum > book.Worksheets.Count || endPageNum <= 0) { endPageNum = book.Worksheets.Count; }
            if (startPageNum > endPageNum) { int tempPageNum = startPageNum; startPageNum = endPageNum; endPageNum = startPageNum; }
            if (imageFormat == null) { imageFormat = ImageFormat.Png; }
            if (resolution <= 0) { resolution = 128; }

            for (int i = startPageNum; i <= endPageNum; i++)
            {
                Aspose.Cells.Worksheet sheet = book.Worksheets[0];
                sheet.PageSetup.LeftMargin = 0;
                sheet.PageSetup.RightMargin = 0;
                sheet.PageSetup.BottomMargin = 0;
                sheet.PageSetup.TopMargin = 0;

                Aspose.Cells.Rendering.ImageOrPrintOptions imgOptions = new Aspose.Cells.Rendering.ImageOrPrintOptions();
                imgOptions.ImageFormat = System.Drawing.Imaging.ImageFormat.Jpeg;
                
                imgOptions.OnePagePerSheet = true;
                imgOptions.PrintingPage = Aspose.Cells.PrintingPageType.IgnoreBlank;

                Aspose.Cells.Rendering.SheetRender sr = new Aspose.Cells.Rendering.SheetRender(sheet, imgOptions);
                sr.ToImage(0, Path.Combine(imageOutputPath, imageName) + "_" + i.ToString() + "." + imageFormat.ToString());
            }
        }
        #endregion
        
        private static SaveFormat GetSaveFormat(ImageFormat imageFormat)
        {
            SaveFormat sf = SaveFormat.Unknown;
            if (imageFormat.Equals(ImageFormat.Png))
                sf = SaveFormat.Png;
            else if (imageFormat.Equals(ImageFormat.Jpeg))
                sf = SaveFormat.Jpeg;
            else if (imageFormat.Equals(ImageFormat.Tiff))
                sf = SaveFormat.Tiff;
            else if (imageFormat.Equals(ImageFormat.Bmp))
                sf = SaveFormat.Bmp;
            else
                sf = SaveFormat.Unknown;
            return sf;
        }

PDF则直接获取链接然后模拟点击跳转

<a id="pdfview" target="_blank" ></a>

var tv_url=window.location.origin+'/static/'+this.userno+'/'+allfile[i].oldname;

console.log(tv_url);

this.pdfview=document.getElementById('pdfview');

this.pdfview.href=tv_url;

// window.open(tv_url, '_blank'); //被弹窗阻止

this.pdfview.click();

转载于:https://my.oschina.net/qingqingdego/blog/2998811